【CSS】マージンとパディングの基本｜m-0, p-10, m-20, p-5 の使い方
CSSのm-0、p-10、m-20、p-5などを使った要素の余白調整方法を紹介します。これらのプロパティを利用することで、コンテンツを効率よく整列させることができます。
🔹 部分コード
<div class="m-0">
この要素のマージンが0になります。背景色が赤です。
</div>
<div class="p-10">
この要素のパディングが10pxになります。背景色が緑です。
</div>
<div class="m-20">
この要素のマージンが20pxになります。背景色が青です。
</div>
<div class="p-5">
この要素のパディングが5pxになります。背景色が黄色です。
</div>
<style>
.m-0 {
margin: 0;
background-color: rgba(255, 0, 0, 0.2); /* 赤 */
}
.p-10 {
padding: 10px;
background-color: rgba(0, 255, 0, 0.2); /* 緑 */
}
.m-20 {
margin: 20px;
background-color: rgba(0, 0, 255, 0.2); /* 青 */
}
.p-5 {
padding: 5px;
background-color: rgba(255, 255, 0, 0.2); /* 黄色 */
}
</style>
💻 完全動作コード（※このコピペのみでHTMLで動作するコード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マージンとパディングの基本</title>
<style>
.m-0 {
margin: 0;
background-color: rgba(255, 0, 0, 0.2); /* 赤 */
}
.p-10 {
padding: 10px;
background-color: rgba(0, 255, 0, 0.2); /* 緑 */
}
.m-20 {
margin: 20px;
background-color: rgba(0, 0, 255, 0.2); /* 青 */
}
.p-5 {
padding: 5px;
background-color: rgba(255, 255, 0, 0.2); /* 黄色 */
}
</style>
</head>
<body>
<div class="m-0">この要素のマージンが0になります。背景色が赤です。</div>
<div class="p-10">この要素のパディングが10pxになります。背景色が緑です。</div>
<div class="m-20">この要素のマージンが20pxになります。背景色が青です。</div>
<div class="p-5">この要素のパディングが5pxになります。背景色が黄色です。</div>
</body>
</html>
🧩 応用と活用方法
margin: 0;は、要素の外側の余白をゼロにするための最も簡単な方法です。padding: 10px;は、要素内の余白を均等に確保します。
📱 レスポンシブデザインとの併用
レスポンシブデザインでは、m-0やp-10を使って、画面のサイズに応じて余白を調整できます。例えば、スマホ表示ではm-0を使って余計な余白を排除し、パディングを調整することができます。
これらのクラスは、特にフォームの入力欄やボタンの周りの余白を整える際に非常に便利です。
コピーしました！