font-size shenanigans

What happens when you make a couple of spans with very small font-sizes render inside of a P with a huge font size? Shit happens, that's what!

by David Iglesias

HTML

<body>
  <p>
    <span class="span1">Lorem</span>
    <span class="span2">ipsum</span>
  </p>
</body>

CSS

* {
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  font-size: 100px;
  color: red;
  background-color: #f90;
  margin: 0; padding: 0;
}

body p {
  background-color: black;
}

p {
  /*font-size: 20px; /* uncomment and behold the margin (distance to the top of the page)*/
  /*margin: 0; /* enable the margin to fix the error */
}

.span1 {
  color: yellow;
  font-size: 12px;
}

.span2 {
  font-size: 20px;
}