CSSのパディングとは何ですか? CSSパディングの設定方法（例）-CSSチュートリアル-php.cn

CSSのパディングとは何ですか? CSSパディングの設定方法（例）

青灯夜游

リリース： 2018-10-10 14:35:35

オリジナル

11678 人が閲覧しました

CSSボックスモデルはフロントエンド開発でよく使われるモデルで、一般的にwidth(幅)、padding(内側の余白)、margin(外側の余白)などの属性をCSSで設定して全体のサイズを調整します。箱。この章では、CSS ボックスモデルのパディング属性の使用方法を紹介します。困っている友人は参考にしていただければ幸いです。

パディングを設定するにはどうすればよいですか?

内部スペースは CSS ボックスモデルの 1 つであるため、内部スペースを設定する方法を見てみましょう。

padding: 宣言内のすべてのパディング属性を設定できる短縮属性です。

まず完全な例を見て、パディングがどのように見えるかを見てみましょう:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>padding--内边距</title>
		<style>
			.demo{
				width: 400px;
				border: 1px solid red;
				padding: 20px;
			}
			.cs{
				border: double;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="cs">我是一个div标签，用来测试的，看看我四周的空白</div>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSのパディングとは何ですか? CSSパディングの設定方法（例）

次のことができます。親ボックス div.demo が、内部の子ボックス div.cs との間に 20 ピクセルのギャップがあるように、padding: 20px; を設定していることを確認してください。

親ボックス div.demo の上部のパディングを削除すると、どのような影響がありますか:

CSSのパディングとは何ですか? CSSパディングの設定方法（例）

このようにして、親ボックスはdiv.demo は、子ボックス div .cs と同じになります。内側の余白をすべて削除すると、重なりがより直観的にわかります。

CSSのパディングとは何ですか? CSSパディングの設定方法（例）

4 つあります。周囲のエッジをそれぞれ設定するためにパディング属性に設定できる値。例:

padding：20px 10px 0px 50px;

ログイン後にコピー

レンダリングを見てください:

CSSのパディングとは何ですか? CSSパディングの設定方法（例）

It padding: 20px 10px 0px 50px; 上マージンと右マージンがそれぞれ 20px 10px、下マージン 0px、左マージン 50px に設定されていることがわかります。このようにして、padding を使用してパディングを設定する順序は、上、右、下、左であることもわかります。これは、4 つのマージンを同時に設定することです。CSS では、パディングを個別に設定するプロパティを見てみましょう。

padding-top: top padding

パディング。 -right: 右パディング

padding-bottom: 下パディング

padding-left: 左パディング

例を使って直感的に感じてみましょうこれらの属性の使い方と機能:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>padding--内边距</title>
		<style>
			.demo{
				width: 400px;
				border: 1px solid red;
				padding: 20px;
			}
			h1{
				padding-top: 20px;
				border: 1px solid #000;
			}
			.cs{
				border: double;
				padding-left: 50px;
				padding-right: 30px;
			}
			p{
				border: 1px dashed palevioletred;
				padding-bottom: 30px;
				
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<h1>php中文网</h1>
			<div class="cs">我是一个div标签，用来测试的，看看我四周的空白</div>
			<p>我在下面哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSのパディングとは何ですか? CSSパディングの設定方法（例）