Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

if a div is 100% width by default

Tags:

html

If a div is 100% width, should I still put in width: 100%;? I look at a lot of code and it's always in there even though by default a div is 100%.

like image 451
omnix Avatar asked Oct 11 '10 13:10

omnix


People also ask

What does width 100% do in HTML?

If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.

What does width 100% do in CSS?

It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.

What is the default width of a div?

All block level elements inherit the width of their parent element by default. In your example, the div is inheriting the width of the parent body tag, taking into account any margin or padding on the body element. this doesn't mention height. Which is max(0,content).

Which display property occupies 100% width by default?

Properties of block elements Occupy Full width ( 100% ) of the parent element.


1 Answers

No, doing so can actually cause problems. 100% is not the same as auto. width refers to the width of the content, excluding borders, padding and margins. auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent.

See this for an example

like image 200
casablanca Avatar answered Nov 15 '22 23:11

casablanca