[04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式...
实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距)
实际占有的高 = height + 2padding + 2border + 2margin
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
设置一个P元素的填充：
p {
padding:10px 5px 15px 20px; /*上填充是 10px ,右填充是 5px ,下填充是 15px ,左填充是 20px*/
padding:10px 5px 15px; /*上填充是 10px ,右填充和左填充是 5px ,下填充是 15px */
padding:10px 5px; /* 上填充和下填充是 10px ,右填充和左填充是 5px */
padding:10px; /* 所有四个填充都是 10px */
}
border ,设置四个边框样式：
p
{
border:5px solid red;
}
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
P{
margin:10px 5px 15px 20px;/*上边距是 10px ,右边距是 5px ,下边距是 15px ,左边距是 20px*/
margin:10px 5px 15px;/* 上边距是 10px ,右边距和左边距是 5px ,下边距是 15px */
margin:10px 5px; /* 上边距和下边距是 10px ,右边距和左边距是 5px */
margin:10px;/* 所有四个边距都是 10px */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="11.css">
</head>
<body>
<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
<div id="d6">d6</div>
</body>
</html>
div{
border: 1px solid red;
width: 100px;
height: 100px;
}
#d0{
float: none;
}
#d1{
float: right;
padding: 20px;
}
#d2{
padding: 20px; /*四个边设置相同的边框*/
margin: 20px;
}
#d3{
padding: 10px 20px 30px 50xp;/*四个边设置不同的边距(上右下左)*/
margin: 10px 20px 30px 40px;
}
#d4{
padding-left: 20px;/*单个边设置边距（left/right/top/bottom）*/
margin-bottom: 40px;
}
#d5{
/*对边设置相同的边距,上下 、左右*/
padding: 20px;
margin: 20px;
}
#d6{
/*对边设置边距的特例:在设置外边时，若左右外边距值为auto，则该元素水平居中*/
margin: 20px 40px;/* 左右20px，上下40px*/
}