Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I prevent the padding property from changing width or height in CSS?

Tags:

html

css

padding

People also ask

Does padding affect width CSS?

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.

Does width account for padding?

The width and height properties include the content, but does not include the padding, border, or margin.

Does padding add to height?

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.

What CSS property is used to set all the padding properties of the 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.