内边距 padding
.b1{
width: 500px;
height: 100px;
background: darksalmon;
text-align: center;
padding: 10px 20px 30px 40px;
/*内边距 1.一个值 四个方向一致 2.2个值，上下 左右一致
3.3个值 上 左右 下一致 4.4个值 顺时针方向上右下左顺序
1.背景色蔓延到内边距
2.设置单一方向 padding top/bottom/left/right */
}
</style>
</head>
<body>
<div class="b1">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sunt animi alias fugiat ipsa asperiores
</div>边框 border
.b2{
width: 100px;
height: 100px;
background: gainsboro;
border: 10px solid rgb(156, 197, 73);
/* border-top: solid red;
border-right: 10px dotted yellowgreen; */
/*边框 粗细 实线 颜色
样式 solid double双实线 dashed虚线 dotted点状线
1.背景色也能蔓延到边框
2.设置单一方向 border-top/bottom/left/right
3.border 可拆分 border-width/style/color
*/
}外边距 margin
.b3{
width: 100px;
height: 100px;
background: red;
border: 10px solid yellow;
margin: 20px ;
/*外边距 1.同内边距类似 四个方向
2. 背景色无法蔓延
3. *{margin:0; }
4.边距可取负值
5.屏幕居中 margin：0 auto; uto对左右有效 对上下无效
*/
}外边距特性
- 兄弟关系，两个盒子垂直水平外边距距离问题
- 垂直方向，外边距取最大值
- 水平方向，外边距会进行合并处理
- 父子关系，给子加外边距但效果作用到了父块上
解决办法多种：
1.给父块增加内边距，子margin-top ==> 父padding-top 注意整个高度计算
2.给父盒子设置边框
4.加浮动
3.overflow:hidden,BFC,