html 盒子模型 簡(jiǎn)單使用
https://www.xiaobuteach.com/html/box/simple.html?from=bili
html 盒子模型 簡(jiǎn)單使用
設(shè)置寬度與高度、padding/border/margin的4個(gè)方向分別設(shè)置相同值。
代碼
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8" >
? ?<title>html 盒子模型 例1 | 小步教程</title>
</head>
<body>
? ?<p ?style="width: 100px;height:80px;padding: 30px;border:40px solid #f00;margin: 50px;">小步教程</p>
</body>
</html>
width 設(shè)置內(nèi)容寬度100px；
height 設(shè)置高度80px；
padding 設(shè)置4個(gè)方向的內(nèi)邊距都是30px；
border 設(shè)置4個(gè)方向的邊框：寬度40px、線型是實(shí)線、紅色；
margin 設(shè)置4個(gè)方向的外邊距都是50px。
運(yùn)行效果
標(biāo)簽：
