CSS: line-break ignores padding?

Question

I have no idea why this is happening … 

<div class="inner">
    <em class="wrapper tiny">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et </em>
</div>

.inner has a simple left and right margin applied. the em.wrapper tag has a padding applied.

I have no idea why the second line the is automatically broken by the browser width is ignoring the padding of the .wrapper box?

Any ideas on that?

Answer 1

The em tag is display: inline by default. Try adding display: inline-block to the class definition.

.wrapper {
  /* ... */
  display: inline-block;
}