suchen

Heim  >  Artikel  >  Web-Frontend  >  Welche zwei Arten von Randeigenschaften gibt es in CSS3?

Welche zwei Arten von Randeigenschaften gibt es in CSS3?

青灯夜游
青灯夜游Original
2022-01-13 15:16:082558Durchsuche

Zwei Randattribute von CSS3: 1. Innere Randattribute (Padding, Padding-Top usw.), die den Abstand zwischen dem Elementrand und dem Elementinhalt festlegen können. 2. Externe Randattribute (Rand, Rand oben usw.). .), um den Abstand um das Element festzulegen.

Welche zwei Arten von Randeigenschaften gibt es in CSS3?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS3-Ränder werden in zwei Typen unterteilt:

  • Padding: der Abstand zwischen dem Elementrand und dem Elementinhalt

  • Äußerer Rand (Rand): der Abstand um das Element

Welche zwei Arten von Randeigenschaften gibt es in CSS3?

Padding Property

<!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>
Property Beschreibung
padding Verwenden Sie die Kurzschrifteigenschaft, um alle Padding-Eigenschaften in einer Deklaration festzulegen.
padding-bottom Legt den unteren Rand des Elementpaddings fest
padding-left Legen Sie die linke Polsterung eines Elements fest.
padding-right. Legen Sie die rechte Polsterung eines Elements fest.
padding-top. Legen Sie die obere Polsterung eines Elements fest :

Margin-Attribut

Welche zwei Arten von Randeigenschaften gibt es in CSS3?

Property

DescriptionmarginAbbreviation-Attribut. Legen Sie alle Randeigenschaften in einer Anweisung fest. margin-bottomLegen Sie den unteren Rand des Elements fest. margin-left Legt den linken Rand des Elements fest. margin-right Legt den rechten Rand des Elements fest. margin-topLegen Sie den oberen Rand des Elements fest. 
<!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>
Beispiel:


(Teilen von Lernvideos:

CSS-Video-Tutorial

)Welche zwei Arten von Randeigenschaften gibt es in CSS3?

Das obige ist der detaillierte Inhalt vonWelche zwei Arten von Randeigenschaften gibt es in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 外边距 内边距 margin padding
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Welches Attribut von CSS3 ändert die Kaskadeneigenschaft?Nächster Artikel：Welches Attribut von CSS3 ändert die Kaskadeneigenschaft?

In Verbindung stehende Artikel

Mehr sehen