layout-grid-line:行間隔
layout-grid-mode:設定の有無
行間隔:
| auto |
文字列の中で最も高さのある文字で決定する |
| none |
変更しない |
| 単位つきの数値 |
|
| % |
|
設定の有無:
layout-grid-lineプロパティで行の間隔を指定し、layout-grid-modeプロパティで設定の有無を指定します。
layout-grid-lineプロパティで指定された大きさの透明なボックスを作り、これを行と行の間に設置することによって一定の行間隔をあけています。
また、同じやり方で一定の文字間隔をあける方法もあります。
詳しいことは『
一定の文字間隔をあける』を御覧ください。
さらに、layout-gridプロパティを使えば、文字間隔と行間隔をまとめて指定することができます。
詳しいことは『
文字間隔や行間隔をまとめて指定する』を御覧ください。
単位つきの数値
行と行の間にあける間隔を、単位つきの数値で指定します。
詳しいことは、『
単位の指定方法』を御覧ください。
・ { layout-grid-line:15pt; }
・ { layout-grid-line:1.5em; }
%
行と行の間にあける間隔を、親要素の高さに対する割合をパーセントで指定します。
・ { layout-grid-line:5%; }
・ { layout-grid-line:15%; }
layout-grid-line : none (行間隔の指定なし)
待ちに待った猫が我が家にやってきたからといって、かまいすぎるのは避けましょう。人間でもはじめての家に行くと緊張するもの。まして、猫は親兄弟と離れて心寂しいはず。そっと家の中に放して勝手に歩き回らせましょう。好奇心の強い猫はニオイを嗅ぎながら家中を観察しはじめ、新たな環境に慣れようとします。
layout-grid-line : 3em (行間隔:3em)
待ちに待った猫が我が家にやってきたからといって、かまいすぎるのは避けましょう。人間でもはじめての家に行くと緊張するもの。まして、猫は親兄弟と離れて心寂しいはず。そっと家の中に放して勝手に歩き回らせましょう。好奇心の強い猫はニオイを嗅ぎながら家中を観察しはじめ、新たな環境に慣れようとします。
<STYLE type="text/css">
<!--
.case1 {
layout-grid-line:none;
layout-grid-mode:line;
}
.case2 {
layout-grid-line:3em;
layout-grid-mode:line;
}
-->
</STYLE>
<H5>layout-grid-line : none (行間隔の指定なし)</H5>
<DIV
class="case1">待ちに待った猫が我が家にやってきたからといって、かまいすぎるのは避けましょう。人間でもはじめての家に行くと緊張するもの。まして、猫は親兄弟と離れて心寂しいはず。そっと家の中に放して勝手に歩き回らせましょう。好奇心の強い猫はニオイを嗅ぎながら家中を観察しはじめ、新たな環境に慣れようとします。</DIV>
<H5>layout-grid-line : 3em (行間隔:3em)</H5>
<DIV
class="case2">待ちに待った猫が我が家にやってきたからといって、かまいすぎるのは避けましょう。人間でもはじめての家に行くと緊張するもの。まして、猫は親兄弟と離れて心寂しいはず。そっと家の中に放して勝手に歩き回らせましょう。好奇心の強い猫はニオイを嗅ぎながら家中を観察しはじめ、新たな環境に慣れようとします。</DIV>