html-盒子模型及pading和margin相关
生活随笔
收集整理的這篇文章主要介紹了
html-盒子模型及pading和margin相关
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
margin:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*margin 外邊距 元素與其他元素的距離（邊框以外的距離）一個(gè)值的時(shí)候： 代表四個(gè)方向值一樣 上右下左（順時(shí)針）二個(gè)值的時(shí)候： 上下 右左三個(gè)值的時(shí)候： 上 右左 下四個(gè)值的時(shí)候： 上 右 下 左margin: auto; 快速左右居中垂直方向： margin-bottom,margin-top 取兩者之間的較大值水平方向： margin-left,margin-right 取兩者的和overflow:hidden; 解決內(nèi)邊距重疊問(wèn)題*/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 內(nèi)邊距，邊框與內(nèi)容之間的距離一個(gè)值的時(shí)候： 代表四個(gè)方向值一樣 上右下左（順時(shí)針）二個(gè)值的時(shí)候： 上下 右左三個(gè)值的時(shí)候： 上 右左 下四個(gè)值的時(shí)候： 上 右 下 左*/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 內(nèi)邊距，邊框與內(nèi)容之間的距離一個(gè)值的時(shí)候： 代表四個(gè)方向值一樣 上右下左（順時(shí)針）二個(gè)值的時(shí)候： 上下 右左三個(gè)值的時(shí)候： 上 右左 下四個(gè)值的時(shí)候： 上 右 下 左</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;}/*盒子大小=樣式寬 + 內(nèi)邊距 + 邊框盒子寬度=左border+右border+width+左padding+右padding盒子高度=上border+下border+height+上padding+下padding*/</style> </head> <body><div></div> </body> </html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/cxhzy/p/10095212.html
總結(jié)
以上是生活随笔為你收集整理的html-盒子模型及pading和margin相关的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 公众号文章
- 下一篇： 从零开始pytorch手写字母识别