Home Web Front-end CSS Tutorial The difference between width:100%; and width:auto

The difference between width:100%; and width:auto

Mar 22, 2018 pm 03:21 PM
100% auto width

This time I will bring you the difference between width:100%; and width:auto. What are the precautions when using width:100%; and width:auto? The following is a practical case. Get up and take a look.

<p>
    <p>1111</p>
</p>
p{
  width:980px;<br>  background-color: #ccc;<br>  height:300px;
}
p{
     width:100%;<br>  /*width:auto;*/
    padding:10px;<br>  background-color:#000;<br>
}
Copy after login

If the width of p is: 100%, it means that the width of p will be 980px, which will fill the p area, and then it has padding, so it will exceed p.

And when width:auto, it is the overall width (including width, margin, padding, border) equal to the parent width (width, excluding the parent's margin, padding, border) , so if padding already takes up 10px of space on the left and right, then the value given by width is 960px.

But whether it is width:100% or auto, the calculation reference is the parent content area width value, not the total width value.

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Waterfall flow layout and infinite loading picture album effect

CSS to achieve 3D button effect

Use transparent to make a triangle

The above is the detailed content of The difference between width:100%; and width:auto. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does the width of html mean? What does the width of html mean? Jun 03, 2021 pm 02:15 PM

In HTML5, width means width. The width attribute defines the width of the element's content area. You can add inner margins, borders, and outer margins outside the content area. You only need to set "element {width: value}" to the element.

Porsche leak suggests EV Boxster, Cayman could replace petrol models as soon as October 2025 Porsche leak suggests EV Boxster, Cayman could replace petrol models as soon as October 2025 Jun 15, 2024 pm 04:02 PM

We'vepreviouslyreportedonleaksofanupcomingelectricPorscheBoxster,andPorschehaspreviouslycommittedtoEVsmakingup80%ofsalesby2030andconfirmedthatelectricBoxsterandCaymanmodelswouldbeintroducedalongsideitsregularpetrol-p

What coin is AUTO? What coin is AUTO? Feb 22, 2024 pm 09:40 PM

What is AUTO coin? AUTO coin is the native token of the Autonio ecosystem. As a cryptocurrency, it aims to provide users with decentralized trading and automated trading services. The Autonio platform is based on blockchain technology and realizes intelligent transactions through smart contracts, providing users with a more efficient and secure transaction experience. Autonio Ecosystem The Autonio Ecosystem was developed by the Autonio Foundation and aims to provide automated trading and investment tools in a decentralized manner to assist users in optimizing their trading strategies and achieving higher returns. This ecosystem integrates AUTO tokens, smart contracts, trading robots and the Autonio trading platform. The goal of Autonio is to

What are the methods for expressing width value in css? What are the methods for expressing width value in css? Nov 13, 2023 pm 05:47 PM

Methods include pixel value, percentage, em unit, rem unit, vw/vh unit, auto, fit-content, min-content, max-content. Detailed introduction: 1. Pixel value (px): The pixel value is fixed, and its width remains unchanged no matter how the screen resolution changes. For example: width: 300px; 2. Percent (%): The percentage width is relative to the width of the parent element. For example: width: 50%; 3, em unit, etc.

What does width mean in iframe What does width mean in iframe Sep 19, 2023 pm 12:00 PM

Width in iframe means the width of the specified frame, which can control the width of the iframe displayed on the page. Acceptable values ​​for width: 1. Fixed pixel value, width="300px", the frame width will always remain unchanged, no matter how the size of the browser window changes; 2. Percentage value, width="50%", the width of the frame It will be adaptively adjusted according to the width of its parent element; 3. Automatic value, width="auto", the width of the frame will be adaptively adjusted according to the width of its content.

KroxWay: Inexpensive smart system for cars comes with rear view camera, offline navigation and is an Android tablet KroxWay: Inexpensive smart system for cars comes with rear view camera, offline navigation and is an Android tablet Aug 10, 2024 am 10:41 AM

The KroxWay, a kind of modern car radio, is now available as part of a crowdfunding campaign. Technically speaking, it is an tablet based on Android 13. The advantage is that it is not as dependent on a smartphone as devices that only support display

Different storage classes in C language Different storage classes in C language Sep 15, 2023 am 11:45 AM

Question What are the different storage classes in C language? Interpret them with programs. Solution A storage class is defined as the scope and lifetime of a variable or function that exists in a C program. Storage Classes Storage classes in C language are as follows: autoexternstaticregister automatic variable/local variable keyword - auto is also known as local variable scope - the scope of local variables is limited to within the block in which they are declared. These variables are declared inside the block. Default value - garbage value example demonstration #include<stdio.h>voidmain(){ autointi=1;{&nbsp

JASMY (JASMY) Prediction: Analyst Says Altcoin To Surge By Over 1,100%, Here's Why JASMY (JASMY) Prediction: Analyst Says Altcoin To Surge By Over 1,100%, Here's Why Aug 09, 2024 am 06:29 AM

Crypto analyst Javon Marks has identified a mid-cap altcoin that can potentially make significant gains in this bull run. Based on his analysis, a 1,100% price surge is already in the works for this altcoin.

See all articles