ホームページ > 記事 > ウェブフロントエンド > CSSのパディングとは何ですか? CSSパディングの設定方法（例）

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

青灯夜游オリジナル: 2018-09-19 11:31:2411689ブラウズ

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パディングの設定方法（例）

これはパディングの使用法であることは明らかではないでしょうか。まったく難しいことではありませんので、誰でも試してみることができます。

以上がCSSのパディングとは何ですか? CSSパディングの設定方法（例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS クリアを賢く使用する方法: フロートをクリアするための両方 (コード付き)次の記事：CSS クリアを賢く使用する方法: フロートをクリアするための両方 (コード付き)

続きを見る