Why does break outside when margin and padding is applied?

Question

I know this is very basic CSS. How do I keep the span contained within the div? At the moment, the span extends outside the top and bottom of the div.

Answer 1

To answer your question, this isn't just an issue with padding or margin, but also with width, display, and the box model.

jsFiddle

span {
    display: inline-block;
}

This will honor any padding, margins, or widths you apply to the span.