CODEWITHSUNDEEP
htmlcsspadding
Sam
Sam

Reputation: 19047

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

I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

When I add the padding-left property, the width of the DIV changes to 220px, and I want it to remain at 200px.

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.

How can I fix this problem?

Upvotes: 283

Views: 290976

Answers (9)

Gabriel
Gabriel

Reputation: 372

A lot of the answers above are correct, but provided little explanation, so i decided to add this for anyone that might need it.

By default, every element box-sizing parameter is set to content-box. Which means, that if you set an element width to 200px and then add a padding of 20px on both horizontal end, this would result to a total width of 240px for that element.

to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following.

* {
     box-sizing: border-box 
  }

This tells the browser to account for any border and padding in the values you specify for an element's width and height.

So for an element set to border-box with a width of 200px, and a padding of 20px on both sides, it's total width would still remain 200px (160px as content box and 40px as padding).

Hope that helps. You read more on css box-sizing

Upvotes: 16

Rohit Soni
Rohit Soni

Reputation: 57

This would work in all cases, with this the extra padding included in predefined width

box-sizing: border-box;

Upvotes: 0

Felix Wong
Felix Wong

Reputation: 119

simply add box-sizing: border-box;

Upvotes: 9

Pramod
Pramod

Reputation: 4647

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.

Upvotes: 463

Ajay Gupta
Ajay Gupta

Reputation: 2957

Try this

box-sizing: border-box;

Upvotes: 37

mvndaai
mvndaai

Reputation: 3831

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>

Upvotes: 14

rvarcher
rvarcher

Reputation: 1574

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.

Upvotes: 41

sean
sean

Reputation: 5

just change your div width to 160px if you have a padding of 20px it adds 40px extra to the width of your div so you need to subtract 40px from the width in order to keep your div looking normal and not distorted with extra width on it and your text all messed up.

Upvotes: -2

Guffa
Guffa

Reputation: 700152

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.

Upvotes: 0

Related Questions