CSS-Box-Modell

Prozentualer Wert der Polsterung

Wie bereits erwähnt, können Sie einen Prozentwert für die Polsterung eines Elements festlegen. Prozentwerte werden wie Ränder relativ zur Breite des übergeordneten Elements berechnet. Wenn sich also die Breite des übergeordneten Elements ändert, ändern sich auch diese.

Die folgende Regel legt den Abstand des Absatzes auf 10 % der Breite des übergeordneten Elements fest:

p {padding: 10%;}

Zum Beispiel: Wenn das übergeordnete Element eines Absatzes ein div-Element ist, wird sein Abstand basierend auf der Breite des div berechnet.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width: 200px;"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This paragragh is contained within a DIV that has a width of 200 pixels.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 

Hinweis: Die obere und untere Polsterung stimmt mit der linken und rechten Polsterung überein; das heißt, der Prozentsatz der oberen und unteren Polsterung wird relativ zur Breite des übergeordneten Elements festgelegt, nicht relativ zur Höhe.

三，CSS 边框属性

CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-width)和颜色(border-color)。（如果有可见背景的话，元素的背景会延伸到边框区域，因为元素的背景是内容、内边距和边框区的背景）

既可以直接定义边框的样式、宽度、颜色，也可以定义单边样式、宽度、颜色。如下图所示：

四，CSS margin属性

围绕在元素边框的空白区域是外边距（默认是空白的。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

可以直接设置四个方向（上，右，下，左）的外边距：

<span>h1 {margin: 10px;}  
  
或者<br>
h1 {margin: 10px 0.25em 2ex 20%;}</span>

也可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

• margin-top
• margin-right
• margin-bottom
• margin-left

Wenn ein Element über einem anderen Element erscheint, verschmilzt der untere Rand des ersten Elements mit dem oberen Rand des zweiten Elements. Bitte schauen Sie sich das Bild unten an:

Wenn ein Element in einem anderen Element enthalten ist (vorausgesetzt, es gibt keinen Abstand oder Rahmen, der die Ränder trennt), werden auch ihre oberen und/oder unteren Ränder zusammengeführt. Bitte schauen Sie sich das Bild unten an:

So seltsam es auch erscheinen mag, Ränder können sogar mit sich selbst verschmelzen.

Angenommen, Sie haben ein leeres Element, das Ränder, aber keinen Rand oder Abstand hat. In diesem Fall berühren sich der obere Rand und der untere Rand und werden zusammengeführt:

Wenn dieser Rand auf den Rand eines anderen Elements trifft, wird er ebenfalls zusammengeführt:

Aus diesem Grund nehmen mehrere Absatzelemente sehr wenig Platz ein, da alle ihre Ränder zu einem kleinen Rand zusammengeführt werden: