HTMLの謎の空白を消す方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLの謎の空白を消す方法について、marginやpaddingの調整と全角や半角スペースの削除に分け、簡単に解説していきます。

marginやpaddingを調整

スタイルのmarginやpaddingプロパティを0にすると空白が消せることがあります。

これらのプロパティは、ブラウザによって、異なる数値がデフォルトで設定されています。

* {
    margin:0;
    padding:0;
}

上記のコードでは、全ての要素のmarginとpaddingプロパティを0にして、余白をなくしています。

全角や半角スペースを削除

要素の間の全角や半角スペースを削除することによって空白が消せる場合もあります。

インラインブロック要素を隣り合わせる等の際に、幅いっぱいのスペースの確保が可能です。

<div>
    <div style="display:inline-block;width:50%;background-color:red;">ほげ</div> <div style="display:inline-block;width:50%;background-color:green;">ほげ</div>
</div>

上記のコードは、インラインブロック要素間に半角スペースがあるため、幅が上手く活用できていない例です。

要素の間の余分な改行を削除

要素の間の改行も、実は見えないスペースを生み出す原因となっていることがあります。

インラインブロック要素を隣り合わせる等の場合では、改行が半角スペースと同様になることがあります。

<div>
<div style="display:inline-block;width:50%;background-color:red;">ほげ</div>
<div style="display:inline-block;width:50%;background-color:green;">ほげ</div>
</div>

上記のコードは、インラインブロック要素間に改行があり、半角スペース同様、幅が上手く活用できていない例となっています。