CSSのマージン（margin）とパディング（padding）の使い方を徹底解説
マージンとパディングとは？
CSSにおけるマージン（margin）とは、HTML要素の外側にある余白のことです。マージンを設定するには、CSSのmarginプロパティを使用します。このプロパティにより、要素の周囲にどれだけのスペースを空けるかを定義できます。
一方、パディング（padding）とは、要素の内側にある余白のことです。paddingプロパティを使用すると、要素のコンテンツとその境界線（ボーダー）との間に、どれだけのスペースを設けるかを指定できます。
marginとpaddingの違い
marginは要素の「外側」に適用されるため、隣接する他の要素との距離を作ります。対してpaddingは要素の「内側」に適用され、コンテンツとボーダーの間隔を調整します。レイアウトを整える際には、この2つの役割の違いを正しく理解しておくことが重要です。
サンプルコード
以下は、CSSでマージンとパディングを設定して表示するコード例です。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.outer-div {
border: 2px solid purple;
width: 300px;
height: 200px;
}
.inner-div {
border: 2px solid green;
margin: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>Margin and padding example</h1>
<div class="outer-div">
<div class="inner-div">
Some sample text inside the inner div which will be padded by 20px all sides.
</div>
</div>
</body>
</html>出力結果
上記のコードを実行すると、次のような出力が得られます。
まとめ
この例では、外側のdiv要素に対して紫のボーダーを設定し、内側のdiv要素にmargin: 20px;で外側の余白を、padding-left: 20px;で左側の内側余白を指定しています。マージンとパディングを組み合わせることで、要素同士の間隔やコンテンツの見やすさを自由にコントロールできるようになります。
-
CSSで要素を中央・水平・垂直に配置する方法を徹底解説
CSSを使えば、要素そのものや要素の中身を、水平方向・垂直方向・中央のいずれにも柔軟に配置できます。本記事では、それぞれの配置手法と実際のコード例をわかりやすく解説します。 水平方向の配置 インライン要素 テキスト、aタグ、spanなどのインライン要素やインラインブロック要素は、CSSのtext-alignプロパティを使って水平方向に配置できます。 ブロックレベル要素 divやpなどのブロックレベル要素は、CSSのmarginプロパティで水平方向に配置できます。ただし、要素の幅が親要素に対して100%だと配置の余地がないため、widthで適切な幅を指定しておく必要があります。 float
-
CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説
CSSの疑似クラス（pseudo-class）は、セレクタに追加することで、その要素の「特別な状態」を指定するためのキーワードです。これを使うことで、通常のセレクタだけでは表現できない細かいスタイル制御が可能になります。例えば、リンクにマウスカーソルが乗っている状態（:hover）、チェックボックスが選択されている状態（:checked）、すでに訪問済みのリンク（:visited）など、要素の状態に応じてスタイルを切り替えられます。代表的な疑似クラスの一覧:link … まだ訪問していないリンクに適用:visited … 訪問済みのリンクに適用:hover … マウスカーソルが要素の上にあると