Time: 20200205
截屏2020-02-05下午10.35.57.png
依據(jù)盒模型，如果我們?cè)趩蝹€(gè)元素上，想浮動(dòng)標(biāo)記一下虛框，則可用margin來(lái)做。
在中心是內(nèi)容元素，注意在border和element中間是padding負(fù)責(zé)的區(qū)域。
margin是與其他盒子進(jìn)行的隱形邊界。
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)元素的不同，一個(gè)默認(rèn)占據(jù)父元素的全部空間，另一個(gè)則是只占一行的部分空間。
如果修改樣式：
p, a{
width: 50%;
margin: 20px;
padding: 30px;
border: 2px solid black;
}
會(huì)得到失控的效果，因?yàn)?code>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)塊元素不會(huì)占據(jù)父元素的一整行空間。
END.
