15

In January, some additional whitespace was added below h1, h2 and h3 headings, yielding more whitespace below the headers than above them.

Could we have the whitespace above the headings be more than the whitespace below them?

I find some posts a bit hard to read, like the current rendering on the left:

Unbalanced whitespace in headings       Unbalanced whitespace in headings

  • I find myself including a <br /> before headings. This looks great... but I'll wish they weren't there if this is ever addressed. I'm not sure how 'Answers' work in meta - but I can offer my suggestion in an answer. – sheriffderek Aug 12 '17 at 1:51
1

I have found that placing margins above elements helps me maintain markup and markdown styles. I usually keep a kitchen-sink of markup in an <article> to style and ensure all cases are accounted for.

https://jsfiddle.net/sheriffderek/v3kjL8ae/

If we had something like this in place

People like me wouldn't fee compelled to add <br /> above

headings like this

heading level 2

paragraph

heading level 2

paragraph


VS...

heading level 2

paragraph


heading level 2

paragraph

article {
  padding: 2rem 1rem;
}

p {
  font-size: 16px;
}

h1 {
  font-size: 20px;
  color: red;
}

h2 {
  font-size: 18px;
  color: blue;
}

@media (min-width: 600px) { 
  /* hopefully you use stylus or something for smooth mixins */
  h1 { /* just one example */
    font-size: 26px;
  }
}

p:not(:first-of-type) {
  margin-top: .5rem;
}

h1 + p { /* any p elements that follow an h1 */
  margin-top: 1rem;
}

p + h2 {
  margin-top: 2rem; /* a $pad variable would be best */
}
<article>

  <h1>heading level 1 (is likely the question, right)</h1>
  
  <p>I usually start out my answer with an overview of why I'm going to say what I'm going to say.</p>
  
  <p>As far as web-specific stuff, I'll then likely write sections for 'markup' 'styles' and 'functionality' or something like that</p>
  
  <h2>Heading level 2 for 'markup'</h2>
  
  <p>I wont put a codeblock here, but a paragraph under a heading should be good enough for the example.</p>
  
  <p>Subsequent paragraphs.</p> 
  
  <h2>Heading level 2 for 'something else'</h2>
  
  <p>I wont put a codeblock here, but a paragraph under a heading should be good enough for the example.</p>  

</article>

This mindset can really take care of business. I'd be happy to go into it further.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .