CSS box model

CSS Box Model

• CSS Box Model Overview
• CSS padding
• CSS Border
• CSS margin
• CSS margin merging

1. CSS Box Model

Specifies how the element box handles element content, padding, borders and margins.

As shown in the picture below:

Second, CSS padding properties

The CSS padding property defines the white space between an element's border and its content. The padding attribute accepts length or percentage values, but does not allow negative values ​​.

You can directly set the padding in four directions (top, right, bottom, left):

<span style="color: #000000;">h1 {padding: 10px;}  
  
或者<br>
h1 {padding: 10px 0.25em 2ex 20%;}</span>

You can also set the top, right, bottom, and left padding respectively by using the following four separate attributes:

• padding-top
• padding-right
• padding-bottom
• padding-left

Percentage value of padding

As mentioned earlier, you can set a percentage value for the padding of an element. Percentage values ​​are calculated relative to the width of the parent element, just like margins. So, if the width of the parent element changes, they will change too.

The following rule sets the paragraph’s padding to 10% of the parent element’s width:

p {padding: 10%;}

For example: If the parent element of a paragraph is a div element, then its padding is calculated based on the width of the div.

<span style="color: #0000ff;"><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 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> </span></span>

Note: The top and bottom padding are consistent with the left and right padding; that is, the percentage of the top and bottom padding will be set relative to the width of the parent element, not relative to the height.

Default value: 0Inheritance: noVersion: CSS1JavaScript syntax:

	object.style.padding="10px 5px"

Possible values

ValueDescriptionautoThe browser calculates padding. Specify the padding value in specific units, such as pixels, centimeters, etc. The default value is 0px. Specifies padding as a percentage of the width of the parent element. inheritSpecifies that padding should be inherited from the parent element.

 

 

三，CSS 边框属性

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

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

length
%

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

 

 

四，CSS margin属性

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

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

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

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

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

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

 

默认值：	0
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.margin="10px 5px"

可能的值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

Introduced below: Margin merging

Margin merging means, When two vertical margins meet, they will form one margin. The height of the merged margins is equal to the larger of the heights of the two merged margins. (ps: Only the vertical margins of block boxes in ordinary document flow will be merged, and the margins between inline boxes, floating boxes or absolutely positioned boxes will not be merged.)

When an element appears above another element, the bottom margin of the first element and the top margin of the second element will be merged. Please look at the picture below:

When an element is contained within another element (assuming there is no padding or border separating the margins), their top and/or bottom margins are also merged. Please look at the picture below:

Although it may seem strange, margins can even merge with themselves.

Suppose you have an empty element, it has margins, but no border or padding. In this case, the top margin and the bottom margin hit each other, and they will be merged:

If this margin meets the margin of another element, it will also be merged:

This is why a series of paragraph elements takes up very little space, because all their margins are merged together to form a small margin: