WordPressでInDesignの様な文字組−その②

図表や画像、 ブログカードなどの高さは、 その内容によりまちまちですが、 それを本文の高さに揃える事を行取りと言います。

カラム表示ですと、 表示しているデバイスによっては隣のブログカードの高さと、 この文章の何処どこかの行の位置がピッタリ同じになります。

表示しているデバイスによっては文章の方が短いかもしれません ｗ

 /*  白抜きボックス  */ 
 .blank-box { 
   margin-top: $line_space; 
   margin-bottom: $line_space; 
   padding-top: $line_height_px / 2 - 2px; 
   padding-bottom: $line_height_px / 2 - 2px; 
 } 

 /*  付箋風ボックス  */ 
 .blank-box.sticky { 
   margin-top: $line_space; 
   margin-bottom: $line_space; 
   padding-top: $line_height_px / 2; 
   padding-bottom: $line_height_px / 2; 
 } 

 /*  ボックス内の文字  */ 
 p { 
   line-height: $line_height_px; 
 } 

どちらのボックスも行間分のマージンを上下に取っています。

そして、 白抜きボックスの下マージンと付箋風ボックスの上マージンは、 マージンの相殺により重なります。

CSS の margin とは？ padding とは？余白の指定方法まとめ

分かりづらい margin と padding の意味や使い方について初心者の方でも分かるように図と例をたくさん用いて解説します。

saruwakakun.com

マージンなどの付き方を着色表示してみると、

そこで、 もう少し詳しく観察します。

先程の 2 つの画像を重ねてみると、 ボックス内のテキストは padding （緑色の部分） が line-height に食い込んでいるのが分かります。

つまり、 ボックス間テキストの line-height にも食い込みが出来る指定をすれば、 ボックスのマージンはボックス間テキストの面つらに届く様になります。

 $str_inner_margin_shift: 1; 
 $str_inner_margin_top: $line_space / 2 - $str_inner_margin_shift; 
 $str_inner_margin_bottom: $line_space / 2 + $str_inner_margin_shift; 

 @mixin p-margin() { 
   margin-top: - $str_inner_margin_top; 
   margin-bottom: - $str_inner_margin_bottom; 
 } 

 p { 
     @include p-margin(); 
 } 

行間の半分を上下のマージンに振り分けます。

計算式の中で、 「$str_inner_margin_shift」 なるものを足したり引いたりしていますが、 上下とも同じマージンですと、 どうにも文字がズレて見えます。

これがブラウザ解釈の問題なのか、 フォントのアセンダ・ディセンダ・ベースライン周りの問題なのかは分かりません ；；