html-盒子模型及pading和margin相關

margin:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*margin 外邊距 元素與其他元素的距離（邊框以外的距離）一個值的時候： 代表四個方向值一樣 上右下左（順時針）二個值的時候： 上下  右左三個值的時候： 上 右左 下四個值的時候： 上  右  下 左margin: auto; 快速左右居中垂直方向： margin-bottom,margin-top   取兩者之間的較大值水平方向： margin-left,margin-right   取兩者的和overflow:hidden; 解決內邊距重疊問題*/div{width: 300px;height: 200px;background: antiquewhite;/*border: 1px solid red;*//*margin: 50px;*//*margin: auto;*//*display: inline-block;*/overflow: hidden;}.box{/*margin-top: 100px;*/}p{width: 50px;height: 50px;background: aqua;/*margin: 100px;*/margin: 100px;}</style>
</head>
<body><div><p></p></div><div class="box"></div>
</body>
</html>

padding:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*padding  內邊距，邊框與內容之間的距離一個值的時候： 代表四個方向值一樣 上右下左（順時針）二個值的時候： 上下  右左三個值的時候： 上 右左 下四個值的時候： 上  右  下 左*/div{width: 300px;height: 200px;border: 1px solid red;/*padding: 20px;*//*padding-left: 50px;*//*padding-top: 50px;*/padding: 50px 0 50px;}</style>
</head>
<body><div>padding  內邊距，邊框與內容之間的距離一個值的時候： 代表四個方向值一樣 上右下左（順時針）二個值的時候： 上下  右左三個值的時候： 上 右左 下四個值的時候： 上  右  下 左</div>
</body>
</html>

盒子大小：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}div{width: 150px;height: 150px;background: aqua;border: 10px solid red ;padding: 20px;margin: 50px;}/*盒子大小=樣式寬 + 內邊距 + 邊框盒子寬度=左border+右border+width+左padding+右padding盒子高度=上border+下border+height+上padding+下padding*/</style>
</head>
<body><div></div>
</body>
</html>

轉載于:https://www.cnblogs.com/cxhzy/p/10095212.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/278714.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/278714.shtml
英文地址，請注明出處：http://en.pswp.cn/news/278714.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！