Menu
Normally, when an element's size is set, the width and height properties determine the width and height of the element's content box. Any padding added to the element will increase the total computed width and/or height of the element—this is how the default box model works in regards to sizing the element.
The width and height properties include the content, but does not include the padding, border, or margin.
The box model of an element in CSS—includes the content, padding, border, and margin areas. Any padding added to the element will increase the total computed height of the element, so you may not always end up with the expected height using just the height property if you also add padding to your element.
The padding CSS shorthand property sets the padding area on all four sides of an element at once.
Add property:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
Note: This won't work in Internet Explorer below version 8.
Put a div in your newdiv with width: auto and margin-left: 20px
Remove the padding from newdiv.
The W3 Box model page has good info.
Try this
box-sizing: border-box;
If you would like to indent text within a div without changing the size of the div use the CSS text-indent instead of padding-left.
.indent {
text-indent: 1em;
}
.border {
border-style: solid;
}<div class="border">
Non indented
</div>
<br>
<div class="border indent">
Indented
</div>simply add box-sizing: border-box;
when I add the padding-left property, the width of the DIV changes to 220px
Yes, that is exactly according to the standards. That's how it's supposed to work.
Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px;
No, newdiv will remain 200px wide.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With