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

html css padding
Sam picture Sam · Apr 23, 2009 · Viewed 189.3k times · Source

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?

Answer

Pramod picture Pramod · Aug 20, 2012

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.

Related questions

Why is there an unexplainable gap between these inline-block div elements?

I have two inline-block div elements, that are the same, positioned next to eachother. However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0. There are no parent divs effecting …

Read More
Padding a table row

<html> <head> <title>Table Row Padding Issue</title> <style type="text/css"> tr { padding: 20px; } </style> </head> <body> <table> <tbody> &…

Read More
How do you specify table padding in CSS? ( table, not cell padding )

I have a table with a colored background and I need to specify the padding between the table and it's content, I.E. cells. The table tag doesn't seem to accept a padding value. Firebug shows the table and tbody's …

Read More