【html/CSS】間隔,隙間,余白,空白をあける方法

デザインにおいて間隔や隙間は非常に重要なものです。

htmlやCSSで上下や左右の間隔・隙間をあける方法を紹介します。

画像やdivの場合と、文字の場合でそれぞれ解説します。

関連記事も参考にしてください。

htmlだけで左右の隙間をあける

スペースであける

画像やテキストは横に並びます。その間に空白スペースを入れると隙間があきます。

　　

<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">　<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">　<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

半角スペースも使えますが、連続でいれても1個分にしかなりません。

tableであける

tableを使うと空間を調整できます。cellpaddingはtdの内側、cellspacingはtd間の隙間を調整できます。

<table border cellpadding="10" cellspacing="10">
    <tr>
        <td><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></td>
        <td><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></td>
        <td><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></td>
        </tr>
</table>

※わかりやすいようにborderをつけていますが、不要であれば外しましょう。

htmlだけで上下の隙間をあける

brで改行する

brを1つ入れるとただの改行ですが、2つ連続させるともう一度改行され1行分の隙間を作ることができます。

<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><br><br>
<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><br><br>
<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

pタグであける

brで1行分あけるのと同じ考え方でpタグで1行分あけることもできます。

 

 

<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><p>&nbsp;</p>
<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><p>&nbsp;</p>
<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

pタグの中に空白スペースまたは「 」で空白をいれると、pタグに1行分の高さを保てます。

やりすぎ注意

ここまで紹介した、空白スペースやbr、pタグで隙間を空ける方法について、1つ程度ならいいですが、連続して使うのは非推奨です。

理由はアクセシビリティです。

特に読み上げブラウザに影響がでます。

空白スペースやbrは読み上げでは休符になります。

これが連続されるとずっと無音になり、ユーザーの時間を奪ってしまいます。

また、tableのcellpaddingとcellspacingは廃止された属性です。

ということで、隙間を空けるには下記より紹介するCSSを使う方法を推奨します。

CSSで上下左右の隙間をあける

間隔をあけていない元の状態

下記のように画像が並んでいる状態から隙間をあけていきましょう。

すでに少し間隔があいていますがこれはデフォルトです。

<style>
.example{
    border: 1px solid #333;
    background: #e7edf8;
}
</style>
<div class="example">
    <img width="200" src="cat.jpg" alt="">
    <img width="200" src="cat.jpg" alt="">
    <img width="200" src="cat.jpg" alt="">
</div>

【隣の要素との間隔をあける】margin

隣の要素との間隔をあけるにはその要素自体にmarginを指定します。

<style>
.example2 img{
    /*コレ*/margin: 10px;
}
.example2{
    border: 1px solid #333;
    background: #e7edf8;
}
</style>
<div class="example2">
    <img width="200" src="cat.jpg" alt="">
    <img width="200" src="cat.jpg" alt="">
    <img width="200" src="cat.jpg" alt="">
</div>

上下左右に違う値を指定する方法

margin:○pxだと上下左右を同じ間隔だけあけます。

上下左右違う値にすることもできます。

上下左右それぞれ個別のCSSで指定することができます。

margin-top:5px;
margin-right:10px;
margin-bottom:15px
margin-left:20px;

1行で指定することもでき、「margin:上 右 下 左」の順で指定します。

margin: 5px 10px 15px 20px;

【枠線との間隔をあける】padding

外側の枠線との間隔をあけるにはその親要素にpaddingを指定します。

<style>
.example3{
    /*コレ*/padding: 20px;
    border: 1px solid #333;
    background: #e7edf8;
}
</style>
<div class="example3">
    <img width="200" src="cat.jpg" alt="">
    <img width="200" src="cat.jpg" alt="">
    <img width="200" src="cat.jpg" alt="">
</div>

上下左右に違う値を指定する方法

padding:○pxだと上下左右を同じ間隔だけあけます。

上下左右違う値にすることもできます。

上下左右それぞれ個別のCSSで指定することができます。

padding-top:5px;
padding-right:10px;
padding-bottom:15px
padding-left:20px;

1行で指定することもでき、「padding:上 右 下 左」の順で指定します。

padding: 5px 10px 15px 20px;

marginとpaddingについて詳しくはこちら↓

【文字の上下の間隔をあける】line-height

文字の上下の間隔をあけるにはline-heightを指定します。

<style>
.example4{
    line-height: 3;
    border: 1px solid #333;
    background: #e7edf8;
    width: 50%;
}
</style>
<div class="example4">
    文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける
</div>

line-heightは指定した数値の文字数分 高さが確保され、その上下中央に文字が置かれます。

よって1行の上下の隙間は次のような式になります。

ややこしいですが、指定した数値が1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。

2行以上になったとき、上と下分の隙間となるため、2なら0.5文字+0.5文字で1文字分開くことになります。

line-heightについて詳しくはこちら↓

【文字の左右の間隔をあける】letter-spacing

文字の左右の間隔をあけるにはletter-spacingを指定します。

<style>
.example5{
    letter-spacing: 0.5em;
    border: 1px solid #333;
    background: #e7edf8;
    width: 50%;
}
</style>
<div class="example5">
    文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける
</div>

letter-spacingは文字の右に指定した分だけ間隔をつくります。文字サイズを基準とする「em」で指定することをオススメします。

【まとめ】間隔をあける方法

html

左右の隙間をあける

• スペースであける
• tableであける

上下の隙間をあける

• brで改行する
• pタグであける

CSS

• 隣の要素との間隔をあけるにはその要素自体にmarginを指定する
• 外側の枠線との間隔をあけるにはその親要素にpaddingを指定する

文字

• 文字の上下の間隔をあけるにはline-heightを指定する
• 文字の左右の間隔をあけるにはletter-spacingを指定する

以上、htmlやCSSで上下や左右の間隔・隙間をあける方法でした。