CODEWITHSUNDEEP
css
matt
matt

Reputation: 44353

CSS: line-break ignores padding?

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?

enter image description here

Upvotes: 19

Views: 13288

Answers (2)

Michael Seibt
Michael Seibt

Reputation: 1346

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

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

Upvotes: 48

ColBeseder
ColBeseder

Reputation: 3669

Your padding is set to 0

padding: 0 0.75em

means padding top and padding bottom are 0px and that padding left and padding right are 0.75em.

update that line of CSS to: 

padding : 0.75em

Upvotes: 0

Related Questions