内側に余白を設定したい

今日はコンテンツ部分の内側に余白を設定したい時のコード<padding>をご紹介します。ちなみに外側部分の余白の設定はこちら

では、早速サンプルを見ていきましょう。

(何も設定していない状態)
(paddingを設定した状態)

paddingというコードをCSSに追加すると、このようにコンテンツの内側に余白を設定することができます。

コードを見ていきましょう。

CSS

body{
  background-color: gray;
}

.main{
margin: 50px;
padding: 50px;
background-color: skyblue;
}

HTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<title>内側に余白を設定する</title>
</head>
<body>
<div class="main">
<h1>内側に余白を設定する</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</body>
</html>

HTMLの中で、

<div class="main">(省略)</div>

という部分がありますが、

今回は”main”というdivクラスに、CSSでpaddingを設定しています。

<div>を使うメリットは、HTML内に名前を付けたブロックを設定し、ブロックごとにCSSで設定していけることです。

少し複雑な話になってきましたので、<div>についてはまた次回お話ししようと思います。

今回は、コンテンツ部分の内側に余白を設定したい時のコード<padding>についてのお話でした。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です