margin 元素的外边距
All the margin properties can have the following values:
auto - the browser calculates the margin 浏览器会水平居中，将左右边距除以2
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element 从父节点继承
.example-css {
margin: 20px 20px 20px 20px; //上右下左的边距都是20px
margin: 20px 30px 20px; //上下的边距都是20px，左右30
margin: 20px 30px; //上下的边距都是20px，左右30
margin: 20px; //上下左右的边距都是20px
margin: auto; //水平居中，左右两边margin平分
margin: inherit;//集成父元素的边距
}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
| Value | Description |
|---|---|
| inline | Displays an element as an inline element (like ). Any height and width properties will have no effect |
| block | Displays an element as a block element (like ). It starts on a new line, and takes up the whole width |
| flex | Displays an element as a block-level flex container |
| grid | Displays an element as a block-level grid container |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values |
| none | The element is completely removed |