记录两个以前分不清的概念,padding和margin
padding
将元素挤压,使其更靠近盒模型中间的部分
margin
即一个框与另一个框之间的白色区域,保持距离或者说是缝隙的大小
padding内推 margin外攘
示例
-
margin
首先看一下margin,如果只写margin的话,上下左右都会产生空白(缝隙),如果只设置一个方向位置,可以用margin-bottom,相应的还有margin-right,top,left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="block.css" media="screen" title="no title" charset ="utf-8">
</head>
<body>
<div class="block-1">a</div>
<div class="block-2">b</div>
<div class="block-3">c</div>
</body>
</html>
.block-1{
border: solid 2px blue;
background: tomato;
margin-bottom: 20px;
}
.block-2{
border: solid 2px blue;
background: green;
margin-bottom: 20px;
}
.block-3{
border: solid 2px blue;
background: red;
margin-bottom: 20px;
}
-
padding
和上面一样,如果我们只设置padding,则所有方向都会产生内边距,但是我们可以用一下方式只设置某一方向,这里以只设置左内边距为例
padding: 0 0 0 20px;
这个顺序可以用下面方式记忆
image.png
当我们试着调整窗口大小的时候,我们会发现颜色条大小会发生变动,也就是说此时是响应式的,如何限制其大小不变呢?
可以使用CSS3新加入的box-sizing : boder-box来设置盒子宽高
box-sizing: border-box;
width: 80px;
height: 80px;
这样内容宽高就不变了.
