让div margin属性消失_为什么div里面打一个字之后就会有高度了呢？
why? 為啥我要寫這個(gè)？
有一說一，挺好奇的，對(duì)于這種最最基礎(chǔ)的問題，我覺得應(yīng)該要有最最樸實(shí)準(zhǔn)確的答案。
是文字本身撐開的？試驗(yàn)才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。
圖1圖1當(dāng)中的 代碼如下所示
<!DOCTYPE html>很簡(jiǎn)單的控制變量，我們能看到肯定不是文字本身的大小撐起來div
再做個(gè)試驗(yàn)
圖2圖二當(dāng)中的代碼如下所示
<!DOCTYPE html> <html><head> <meta charset="utf-8"> </head> <style>.text1 {border: 1px solid red;font-size: 20px;line-height: 0;}.text2 {margin-top: 100px;border: 1px solid blue;font-size: 0;line-height: 20px;} </style><body><div class="text1">測(cè)試1是高度撐開了div嗎？</div><div class="text2">測(cè)試2 那到底是什么撐開的div呢？ </div> </body></html>雖然沒有文字，但是div依舊不是空的，而且我們并沒設(shè)置height,那么可以確定是line-height撐起了整個(gè)的高度
在css中能撐起來元素高度的由兩個(gè)屬性組成 line-height height
line-height?
what？這是啥？
line-height是設(shè)置行高的的屬性，本文不會(huì)完整的科普line-height，只會(huì)挑幾個(gè)比較重要的點(diǎn)來分享。
line-height可以繼承嗎？
會(huì)，但是只是在當(dāng)前元素沒有l(wèi)ine-height屬性時(shí)才會(huì)繼承父元素的
line-height設(shè)置大小的時(shí)候是相對(duì)于與誰設(shè)置的大小呢？
line-height 百分?jǐn)?shù)是基于當(dāng)前字體尺寸的百分比行間距，換句話來說，如果此時(shí)font-size為0，會(huì)有下面的結(jié)果
把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中是真的嗎？
是真的，但是描述不準(zhǔn)確，準(zhǔn)確的描述是““把line-height設(shè)置為您需要的box的大小可以實(shí)現(xiàn)單行文字的垂直居中”
簡(jiǎn)單來說在想要在div或者p居中的時(shí)候，只需要把line-height設(shè)置成你想要的高度就ok了，不需要設(shè)置height
舉個(gè)栗子
圖3可以看圖3當(dāng)中的測(cè)試3
下面是對(duì)應(yīng)的代碼
<!DOCTYPE html> <html><head> <meta charset="utf-8"> </head> <style>.text1 {border: 1px solid red;font-size: 20px;line-height: 0;}.text2 {margin-top: 100px;border: 1px solid blue;font-size: 0;line-height: 20px;}.text3 {margin-top: 100px;border: 1px solid blue;line-height: 120px;} </style><body><div class="text1">測(cè)試1是高度撐開了div嗎？</div><div class="text2">測(cè)試2 那到底是什么撐開的div呢？ </div><div class="text3">測(cè)試3 這個(gè)是一個(gè)居中而且沒有height的測(cè)試，能成功嗎？ </div> </body></html>可以明顯的注意到class=text3的已經(jīng)明顯居中了，但是實(shí)際上并沒有設(shè)置height
注意：這個(gè)是單行元素能這樣玩，如果是多個(gè)段落不能這樣玩，會(huì)出大事情.
那多行而且是段落怎么辦呢？
<!DOCTYPE html> <html><head> <meta charset="utf-8"> </head> <style>.text1 {border: 1px solid red;font-size: 20px;line-height: 0;}.text2 {margin-top: 100px;border: 1px solid blue;font-size: 0;line-height: 20px;}.text3 {margin-top: 100px;border: 1px solid blue;line-height: 120px;}.text4 {margin-top: 100px;border: 1px solid blue;line-height: 150px;height: 150px;display: table;}.text41 {display: table-cell;vertical-align: middle;} </style><body><div class="text1">測(cè)試1是高度撐開了div嗎？</div><div class="text2">測(cè)試2 那到底是什么撐開的div呢？ </div><div class="text3">測(cè)試3 這個(gè)是一個(gè)居中而且沒有height的測(cè)試，能成功嗎？ </div><div class="text4"><div class="text41"><p class="textp1">測(cè)試4 這個(gè)是一個(gè)居中而且沒有height的測(cè)試，能成功嗎？11</p><p class="textp1">測(cè)試4 這個(gè)是一個(gè)居中而且沒有height的測(cè)試，能成功嗎？22</p></div></div> </body></html>比較常見的方案兩種：
1.外部包一個(gè)table，使用table布局，里面使用table-cell+vertical-align:middle，雖然丑，但是確實(shí)有效.
2. flex (不談了，不懂得可以去查一下)
其他的方法或多或少的有一些小問題，如果有新的方法，歡迎補(bǔ)充。
ps:line-height的一些需要注意注意的點(diǎn)
總結(jié)
以上是生活随笔為你收集整理的让div margin属性消失_为什么div里面打一个字之后就会有高度了呢？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python len函数_知识清单Pyt
- 下一篇： 西安紫檀红木家具哪个品牌好?