1. まとめトップ

HTMLでCSSを使って不要な余白を削除する

htmlでwebページなどを作成する際、余白を削除してピッタリ左詰めなどにしたい場合あると思います。今回はmarginやpaddingといったcssのプロパティを調整して余白を削除する方法を紹介します。

更新日: 2013年01月19日

12 お気に入り 59056 view
お気に入り追加

この記事は私がまとめました

Doctor.Yさん

はじめに

htmlでwebページなどを作成する際、余白を削除してピッタリ左詰めなどにしたい場合あると思います。今回はmarginやpaddingといったcssのプロパティを調整して余白を削除する方法を紹介します。

手順0:CSSのmarginとpaddingの違いを理解する

余白の調整を行うためにはcssでmarginとpaddingの値を調整しますが、以下のような違いがありますので覚えておいて下さい。

内側に余白を作るのがpadding
外側に余白を作るのがmargin

手順1:google chromeを用意しておく

google chromeを実行

画面を右クリック

「要素を検証」クリック

Developer Toolsの画面が表示される

この画面上で該当箇所のhtmlタグの上にマウスカーソルを持ってくると、
画面の余白などが確認できます。

インストールしていない方は以下のサイトから
google chromeをインストールして準備しておきましょう。

手順2:余白を削除しない通常のhtmlの表示確認

以下に<body>の中に「余白あり」の文字と

<ul>と<li>で「余白あり」のリスト表示するサンプルhtmlを示します。

google chromeで表示して、手順1で紹介した方法で
<body>タグの上にマウスカーソルを持って行くと、
余白があるのが確認できると思います。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>余白がある通常のhtml</title>
</head>

<body>
余白あり
<ul>
<li>余白あり1</li>
<li>余白あり2</li>
<li>余白あり3</li>
</ul>
</body>
</html>

手順3:bodyの余白を削除する

手順2のhtmlサンプルコードに以下のコードを追加してbodyの余白を削除します。

<style type="text/css">
body {
margin: 0px;
}
</style>

google chromeで表示して、手順1で紹介した方法で
<body>タグの上にマウスカーソルを持って行くと、
余白が削除されたのが確認できると思います。

以下サンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bodyの余白が削除されたhtml</title>

<style type="text/css">
body {
margin: 0px;
}
</style>

</head>

<body>
余白なし
<ul>
<li>余白あり1</li>
<li>余白あり2</li>
<li>余白あり3</li>
</ul>
</body>
</html>

手順4:<ul>と<li>の余白を確認する

手順3のコードでgoogle chromeで表示して、手順1で紹介した方法で
<ul>タグの上にマウスカーソルを持って行くと、

上下左に余白があるのが確認できると思いますので確認してみてください。

手順5:<ul>と<li>の余白を削除する

手順3のhtmlサンプルコードに以下のコードを追加して<ul>と<li>の余白を削除します。

ul{
margin: 0px; /* 上下の余白削除 */
padding: 0px; /* 左の余白(箇条書きの「・」)削除 */
}

google chromeで表示して、手順1で紹介した方法で
<ul>タグの上にマウスカーソルを持って行くと、
余白が削除されたのが確認できると思います。

以下サンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>body、ul、liの余白が削除されたhtml</title>

<style type="text/css">
body {
margin: 0px;
}

ul{
margin: 0px; /* 上下の余白削除 */
padding: 0px; /* 左の余白(箇条書きの「・」)削除 */
}
</style>

</head>

<body>
余白なし
<ul>
<li>余白なし1</li>
<li>余白なし2</li>
<li>余白なし3</li>
</ul>
</body>
</html>

1