Time: 20200205
截屏2020-02-05下午10.35.57.png
依據(jù)盒模型，如果我們在單個元素上矩父，想浮動標記一下虛框没龙，則可用margin來做。
在中心是內(nèi)容元素陪白，注意在border和element中間是padding負責的區(qū)域颈走。
margin是與其他盒子進行的隱形邊界。
Play with box model
<!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>盒子模型</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>test</p>
<p>test</p>
<a href="http://">test</a>
<a href="http://">test</a>
</body>
</html>
可以看到：
截屏2020-02-05下午11.15.32.png
截屏2020-02-05下午11.15.42.png
塊元素和行內(nèi)元素的不同咱士，一個默認占據(jù)父元素的全部空間立由，另一個則是只占一行的部分空間轧钓。
如果修改樣式：
p, a{
width: 50%;
margin: 20px;
padding: 30px;
border: 2px solid black;
}
會得到失控的效果，因為a本身是行內(nèi)元素锐膜，不是塊元素毕箍。
截屏2020-02-05下午11.22.10.png
將行內(nèi)元素改成塊元素即可：
p, a{
width: 50%;
margin: 20px;
padding: 30px;
border: 2px solid black;
display: block;
}
截屏2020-02-05下午11.23.02.png
如果將樣式改為inline-block：
p, a{
width: 20%;
margin: 20px;
padding: 30px;
border: 2px solid black;
display: inline-block;
}
顯示效果如下：
截屏2020-02-05下午11.24.27.png
這種行內(nèi)塊元素不會占據(jù)父元素的一整行空間。
END.
