Question

I am trying to add padding to a box via:

.p-box-header{
  border: 1px solid orange;
  float: left;
  width: $p-box-width;
  padding: 0px 0px 0xp 20px;
}

and it looks like this:

The ‘Food’ header is adding 20px to it’s width. This didn’t happen in box below. Why is this happening and how can I prevent?

thx

Answer 1

Note : You wrote “0xp” and not “0px”. If this doesn’t solved your problem, then read the following.

You should take a look at a CSS3 property called box-sizing.

This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

More infos here : http://css-tricks.com/box-sizing/ and it’s available since IE8 (CanIUse – Box-sizing)