html-盒子模型及pading和margin相關
阿新 • • 發佈：2018-12-10
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>