How to make padding in a div go inward

Question

So I'm trying to add padding to a div box but it just makes the box itself bigger and throws off the design, any ideas on how to stop it doing that, here's the CSS code

#mainbox {
background-color:#111111;
padding:0px;
margin:0 auto;
width:900px;
border:solid 1px;
}

see possible duplicate http://stackoverflow.com/questions/779434/preventing-padding-propety-from-changing-width-or-height-in-css — DRC, Jul 06 '13 at 15:57

SlightlyCuban · Answer 1 · 2013-07-06T16:12:55.283

The CSS3 box-sizing: border-box property is probably exactly what you want:

#mainbox {
    background-color:#111111;
    padding:10px;
    margin:0 auto;
    width:90px;
    border:solid 1px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

By default, width only applies to the content, and margin and padding is added after the fact. So if your width is 90px, and you add a padding of 10px, your div will be 100px.

The box-sizing property in CSS3 makes the browser include border, margin, and padding with width, making math a little easier, especially when you don't know the widths of everything beforehand.

Note: the padding-box property is not widely supported.

score 1 · Answer 2 · answered Aug 04 '16 at 09:19

Check the sample I have attached. I used it with hover. you can use directly too.

div {
    width:100px;
    height:100px;
    background-color:#ccc;
    margin:50px;
}

div:hover {
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

<div></div>

How to make padding in a div go inward

2 Answers2