css child padding makes it draw out side the parent

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 an

Answer 1

the reason the child was overdrawing the boundaries of the parent is because the child is a tag of type 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 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.