标签：文字 content 20px 调试 高度 ott 之间 red 上下左右
盒子模型
网页上的每一个标签都是一个盒子
每个盒子都有四个属性
盒子里装的东西
网页中通常是指文字和图片
怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
边框（border）：盒子本身
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
上2图：在网站点击检查（或审查元素），就可以看到盒子模型
上图：
content是内容；
padding是内边距；
border是盒子；
margin是盒子外的外边距；
宽度是基于内容的。
上图：IE内容的宽度高度，是基于盒子的宽度高度
上图：
例子1中的4个值方向分别是：上、右、下、左
例子2中的3个值方向分别是：上、左右、下
上图：
例子3中的2个值方向分别是：上下、左右
例子4：上下左右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
width: 250px;
height: 140px;
}
</style>
</head>
<body>
<div>123123123</div>
</body>
</html>代码：设置一个div标签
上图：默认是有边距的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 250px;
height: 140px;
}
</style>
</head>
<body>
<div>123123123</div>
</body>
</html>
代码：内边距设置为0（padding: 0;）；外边距设置为0（margin: 0;）
上图：将内边距和外边距设置为0
div{
background-color: red;
width: 250px;
height: 140px;
border: 4px solid blue;
}代码：增加一个边框
上图：
可以看到div这个标签宽度高度是250*140，就是我们设置的大小。
border边框的边距是4，也是我们设置的值。
div{
background-color: red;
width: 250px;
height: 140px;
border: 4px solid blue;
padding-bottom: 20px;
}代码：padding-bottom: 20px; 新增，给内边距下方
上图：
将鼠标放在盒子的padding（内边距），内边距下面有个20的数字，这就是我们添加的大小；
然后再看左上角的图片，明显看到了内边距；因为加了内边距，盒子整体变大了。
div{
background-color: red;
width: 250px;
height: 140px;
border: 4px solid blue;
/*padding-bottom: 20px;*/
padding: 50px 30px 25px 10px;
}
代码：修改内边距大小
上图：分别调试了内边距的上下左右大小。
div{
background-color: red;
width: 250px;
height: 140px;
border: 4px solid blue;
/*padding-bottom: 20px;*/
padding: 50px 30px 25px 10px;
margin: 30px;
}代码：增加外边距margin: 30px;
<body>
<div>123123123</div>
<div>123123123</div>
</body>代码：增加一条div标签
上图：两个div标签的举例就是外边距的30px
外边距的设计与内边距相同
上图：
border-width：设置边框的宽度
border-style：设置边框的样式，比如实线、虚线等。
border-color：设置边框的颜色
标签：文字 content 20px 调试 高度 ott 之间 red 上下左右
原文地址：https://blog.51cto.com/daimalaobing/2445593
