line-height(行間)スタイル

以下の各行でline-height(行間)をいろいろ変えている
FontSizeが16ptで,行間指定は40px
FontSizeが16ptで,行間指定は32px
FontSizeが16ptで,行間指定は24px
FontSizeが16ptで,行間指定は16px
FontSizeが16ptで,行間指定は12px
FontSizeが16ptで,行間指定は8px
FontSizeが16ptで,行間指定は6px
FontSizeが16ptで,行間指定は15mm
FontSizeが16ptで,行間指定は2em

これは表です
FontSizeが16ptで,行間指定は18px

■line-heightの活用

Kodayan

Homepage

Welcome!

htmlsouse.gif (2461 バイト)

<style TYPE="text/css">
<!--
    #D1 {font-size:16pt;width:500px;border-style:solid}
    TR {font-size:16pt;line-height:18px}
-->
</style>
</head>

<body>
<div id="D1">
<span>以下の各行でline-height(行間)をいろいろ変えている</span><br>
<span style="line-height:40px">行間指定は40px</span><br>
<span style="line-height:32px">行間指定は32px</span><br>
<span style="line-height:24px">行間指定は24px</span> <br>
<span style="line-height:16px">行間指定は16px</span> <br>
<span style="line-height:12px">行間指定は12px</span> <br>
<span style="line-height:8px">行間指定は8px</span><br>
<span style="line-height:6px">行間指定は6px</span><br>
<span style="line-height:15mm">行間指定は15mm</span><br>
<span style="line-height:2em">行間指定は2em</span>
</div>

<table border="1" cellpadding="0" cellspacing="1" width="400">
<tr>
<td width="191">これは表です<br>
</td>
<td width="201">FontSizeが16ptで,行間指定は18px</td>
</tr>
</table>

<p>■line-heightの活用</p>
<div style="font:900 46pt;line-height:6pt;">
    <div style="color:#404040;text-indent:50px;">
        Kodayan</div>
    <div style="color:#808080;text-indent:100px;">
        Homepage</div>
    <div style="color:red;text-indent:150px;">
        Welcome!</div>
</div>

END