HTMLの謎の空白を消す方法【現役エンジニアが解説】
今回は、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>
上記のコードは、インラインブロック要素間に改行があり、半角スペース同様、幅が上手く活用できていない例となっています。