Child padding falls outside the parent element

Question

Applying padding to child elements is making the child draw over the boundaries of its containing parent. Can you please explain the size consideration in margin, padding and content width.

If we increase the padding why don't the parent also resize to the accumulative size of all the children considering the child's padding also?

http://jsfiddle.net/NkXUW/4/

 <div>        <ul>           <li><a>srikanth</a>            </li>            <li><a>sunkist</a>         </li>         <li><a>sunday</a>         </li>     </ul>     </div>    div {      margin-top:90px;     margin-left:90px;     background-color:#676896;    }    ul {      list-style-type:none;    }     ul li {     display:inline-block;    }    a {     background-color:#c34567;     padding:10px 10px 10px 10px;    } 

What are coding practices that we need to consider to over come this problem.?

Ok guys I got lot answers that do work. Can anybody explain the parent size calculation based on child elements. what are characteristics of the child that are considered while calculating the encompassing parent's size. when the whole padding is considered when it not considered ?

Answer 1

the reason the child was overdrawing the boundaries of the parent is because the child is a tag of type <a> which by default is display:inline (you can see if that you go in chrome developer tools and see under computed style). an inline element displays like a line of text.. so the way it treats width and height and all that is very different than a block (a div for example is a block by default).

that being said, if you change the display setting of a to display:inline-block you get to keep the inline properties of <a> but at the same time also get the block properties, namely having a padding and width and height that is recognised by its parent node, which will then expand to accommodate it.

So there aren't any best practices about this. The only best practice is to understand what each display property mean (ie inline vs block vs inline-block) and put it to its proper use.