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

Use display:inline-block;

a {
    background-color: #C34567;
    display: inline-block;
    padding: 10px;
}

SEE DEMO

• An inline element has no line break before or after it, and it tolerates HTML elements next to it.
• A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
• An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

http://www.w3schools.com/cssref/pr_class_display.asp