margin 和 padding
可以设置1~4个属性
| 属性个数 | 属性值 |
|---|---|
| 1 | 一起设置 上下左右 |
| 2 | 分别设置 上下 , 左右 |
| 3 | 分别设置 上 , 左右 , 下 |
| 4 | 分别设置 上右下左 |
display
外部表现类(display-outside) : block , inline
该类属性值的效果是规定元素的外部显示类型 , 也就是在页面布局中的元素类型 : 块级元素或内联元素
- block
该属性值用于设置元素的外显类型为块级元素 , 在页面布局中 , 单独占据一整行的空间 , 在元素前后进行换行 . 该类型的元素还可以设置 width,height,padding,margin等属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d{
display: block;
width: 200px;
height: 100px;
background: pink;
}
</style>
</head>
<body >
<p class="d">这是一段文本</p>
</body>
</html>
- inline
该属性值用于设置元素的外显类型为行内元素 , 在页面布局中 , 可与其他行内元素位于同一行 . (不换行)
该类型元素
设置的width,height , 以及margin的(top,bottom) 都无效
设置的padding(left,rigth),margin(left,right)是有效的
设置的padding(top,bottom) 时 , 在元素空间上是有效的,但这并不会影响与同一行的行内元素的对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d{
display: inline;
width: 200px; /*无效*/
height: 100px; /* 无效*/
margin: 10px 20px; /* 20px是有效的(因为设置的是左右) 10px无效*/
padding: 20px 10px; /* 都有效*/
background: pink;
}
</style>
</head>
<body >
<p>这是一段块级元素文本</p>
<span>这是一段行内元素文本</span>
<div class="d">这是一个行内元素</div>
<span>这是第二段行内元素文本</span>
</body>
</html>
内部表现类(display-inside) : flex,gird,table,flow,flow-root,ruby
这类属性值的效果是规定元素的内部显示类型 , 即定义元素内部子元素的布局方式
- flex
内显类型为 弹性布局
外显类型为 块级元素
