ojVbmM

index.html

<h1>Lorem ipsum dolor sit amet, consectetur</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor neque nisl. Nullam facilisis consectetur libero congue accumsan. Aliquam erat volutpat. Fusce in euismod tellus. Nulla eu mauris nec purus sagittis aliquam. In nisl tortor, faucibus nec enim in, tempor tempor tortor. Aenean nulla enim, feugiat eget tempus quis, aliquet et nibh. Sed imperdiet nisl sit amet fringilla aliquam. Duis non enim diam. Nam vulputate posuere pellentesque. Sed eget mattis libero. Aenean dictum leo sit amet urna vehicula tempus. Duis tellus dui, porta in sem sit amet, pharetra dictum sem. Donec euismod quam tellus, ut egestas odio varius ac. Aliquam vel ullamcorper tortor, et ultrices est.<p>

<p>Aliquam rhoncus iaculis nisl vel consectetur. Integer non felis vulputate, maximus odio at, mollis quam. Morbi aliquam, mi in consequat vulputate, risus neque luctus ante, a aliquam lorem felis vitae orci. Duis ullamcorper eros non fringilla gravida. Nulla sed ante tempor, ullamcorper neque at, tempor orci. Duis viverra diam sit amet enim vehicula interdum. Proin eu quam nulla. Etiam vitae porta mauris, a elementum nulla. Maecenas sit amet felis ut est pharetra facilisis. Suspendisse suscipit tortor nulla, sit amet aliquam enim sollicitudin maximus. Duis tempor placerat turpis, at molestie ipsum vulputate eget. Morbi in nisi accumsan, volutpat elit quis, gravida enim. Nunc cursus blandit lectus, a accumsan arcu porta a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<p>

<p>Phasellus eget eleifend ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eu commodo ipsum. Mauris quis quam sed est porta pretium ut sit amet lectus. In sagittis libero ac nunc commodo, vel venenatis ante accumsan. Nullam gravida neque quis elit ultrices rutrum. Nam interdum mauris ex, ut consectetur libero faucibus non. Donec aliquet purus eget nunc laoreet, in faucibus odio sollicitudin. Maecenas sit amet volutpat ante, non porttitor arcu.</p>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus sagittis nisl vel consequat. Suspendisse sit amet nulla in erat vestibulum vestibulum. Integer pharetra auctor varius. Maecenas eleifend dictum metus ut molestie. Quisque id euismod sapien. Maecenas sit amet lorem nec turpis placerat consectetur. Ut consectetur, ante nec aliquam iaculis, nisi sem interdum libero, et auctor enim ipsum at enim.<p>

<p>Praesent nec neque eu erat interdum tincidunt ut quis tellus. Praesent efficitur euismod urna fringilla lobortis. Praesent sodales est non neque tincidunt laoreet. Nullam rutrum non ex nec finibus. Proin accumsan sit amet nisl at varius. Suspendisse quam erat, consectetur in ipsum ac, vulputate lacinia odio. Nunc porttitor diam sem, at interdum metus dictum nec. Integer sed nulla dui. Nunc sodales tincidunt lectus. Suspendisse ultricies pharetra sapien, in vehicula ante sollicitudin sit amet. Cras malesuada dui et ex convallis mattis.<p>

<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed</h3>

<p>As stated earlier, block paragraphs – paragraphs separated by line breaks – are the default method used by web browsers. As explained in §2.2.2 the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is maintained.<p>

ojVbmM.markdown

ojVbmM

A Pen by Captain Anonymous on CodePen.

License.

style.css

html {
  font: 1em arial, san-serif;
  padding: 3em;
}

p {
  line-height: 1.5;
  /* since paragraphs being to the same heading, 
  the bottom margins needs to be the same as the 
  header */ 
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  /* would like the top margin of paragraphs to 
  match no matter the font size of the header, 
  therefore margin-top is omitted */
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin-top: 3rem;  /* 2x of baseline-height */
  margin-bottom: 1.5rem;
}