一、概述 |
我们来说说标签的内外边距,内边距(padding),外边距(margin),我们先来看看这个标准的盒子模型吧,如图所示:
二、外边距 |
说明:我们外边距用margin样式来表示。外边框可以理解为,边框的扩展还需要占用多大的空间,也是上、下、左、右,分别是margin-top,margin-bottom,margin-left,margin-right。当然如果直接用margin的话,那外边距的扩展,上下左右都都会产生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red;height: 40px;width: 80%;">
<div style="background-color: skyblue;height: 20px;">小苏苏</div>
</div>
</body>
</html>
显示效果图
然后我设置margin-top值之后:
里面的div和外面的div产生了上下产生了边距,随着我的margin-top的值不断扩大,则边距也越来越大:
行外边距只的是本身的div没有高度和宽度没有变化,只是离父标签的高度有变化。
margin: 10px; #上下左右边距都是:10px
margin: 0 10px; #上下边距:0,左右:10px
margin: 0 10px 0 10px; #上:0 ,右:10px ,下:0,左:10px
三、内边距 |
说明:我们内边距用padding来表示,是内容到边框的距离,可以有上、下、左、右,分别是padding-top,padding-bottom,padding-left,padding-right。当然如果直接用padding的话,那内边距的扩展,上下左右都都会产生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red;height: 40px;width: 80%;">
<div style="background-color: skyblue;height: 20px;">小苏苏</div>
</div>
</body>
</html>
效果图
然后我设置padding-top值之后:
其实div自己本身的高度没有变大,用的是拉长自己的边距。
padding: 10px; #上下左右边距都是:10px
padding: 0 10px; #上下边距:0,左右:10px
padding: 0 10px 0 10px; #上:0 ,右:10px ,下:0,左:10px