css3 の 2 種類の margin プロパティとは何ですか?-フロントエンドQ&A-php.cn

css3 の 2 種類の margin プロパティとは何ですか?

青灯夜游

リリース： 2022-01-13 15:16:08

オリジナル

2577 人が閲覧しました

css3 の 2 つのマージン属性: 1. 要素の境界線と要素コンテンツの間のスペースを設定できる内側マージン属性 (padding、padding-top など); 2. 外部マージン属性 (margin、margin) -top など) 要素の周囲のスペースを設定します。

css3 の 2 種類の margin プロパティとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 には 2 種類のマージンがあります:

Padding: 要素の境界線と要素の内容の間のスペース
マージン: 要素の周囲のスペース

css3 の 2 種類の margin プロパティとは何ですか?

##パディングプロパティ

#PropertiesDescriptionpadding短縮属性を使用して、宣言内のすべてのパディングプロパティを設定します padding-bottom要素の下部パディングを設定しますpadding-left要素の下部パディングを設定します左パディングpadding-right要素の右パディングを設定します##padding-top例:






要素の上部パディングを設定します要素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
	background-color:yellow;
}
p.padding
{
	padding:25px 50px;
}
</style>
</head>

<body>
<p>这是一个没有指定内边距的段落。</p>
<p class="padding">这是一个指定内边距的段落。</p>
</body>

</html>

ログイン後にコピー

css3 の 2 種類の margin プロパティとは何ですか?

マージン属性

属性marginmargin-bottommargin-leftmargin-rightmargin-top例:

説明
省略属性。すべてのマージンプロパティを 1 つのステートメントで設定します。
要素の下マージンを設定します。
要素の左マージンを設定します。
要素の右マージンを設定します。
要素の上マージンを設定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
	background-color:yellow;
}
p.margin
{
	margin:100px 50px;
}
</style>
</head>

<body>
<p>这是一个没有指定外边距大小的段落。</p>
<p class="margin">这是一个指定外边距大小的段落。</p>
</body>

</html>

ログイン後にコピー

css3 の 2 種類の margin プロパティとは何ですか? (学習ビデオ共有: