見出しと下線の離し方

line-height を調整することで下線と見出しの間に空きが作れる。
Gist がこのやり方で余白を取ってる。というか、線を上下に引いても邪魔にならないだけの行間を見出しすべてが持ってる。

.markdown-body h1 {
  ...
  border-bottom: 1px solid #ddd;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  ...
  padding: 0;
  line-height: 1.7;
}

こうなる:

でもこの line-height を使いやり方だと、見出しが二行になった時に一行目から二行目の間が広く見え、見出しと下線の間が狭く見える。
これでは困る時があるので、僕は下線との余白は padding で取るようにしてる。

h1 {
  ...
  padding-bottom: .25em
  border-bottom: 1px solid #ddd;
}

h1, h2, h3, h4, h5, h6 {
  ...
  line-height: 1.7;
}

こうなる: