让div margin属性消失_为什么div里面打一个字之后就会有高度了呢？
why? 為啥我要寫這個？
有一說一，挺好奇的，對于這種最最基礎的問題，我覺得應該要有最最樸實準確的答案。
是文字本身撐開的？試驗才是檢驗真理的唯一標準。
圖1圖1當中的 代碼如下所示
<!DOCTYPE html>很簡單的控制變量，我們能看到肯定不是文字本身的大小撐起來div
再做個試驗
圖2圖二當中的代碼如下所示
<!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">測試1是高度撐開了div嗎？</div><div class="text2">測試2 那到底是什么撐開的div呢？ </div> </body></html>雖然沒有文字，但是div依舊不是空的，而且我們并沒設置height,那么可以確定是line-height撐起了整個的高度
在css中能撐起來元素高度的由兩個屬性組成 line-height height
line-height?
what？這是啥？
line-height是設置行高的的屬性，本文不會完整的科普line-height，只會挑幾個比較重要的點來分享。
line-height可以繼承嗎？
會，但是只是在當前元素沒有line-height屬性時才會繼承父元素的
line-height設置大小的時候是相對于與誰設置的大小呢？
line-height 百分數是基于當前字體尺寸的百分比行間距，換句話來說，如果此時font-size為0，會有下面的結果
把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中是真的嗎？
是真的，但是描述不準確，準確的描述是““把line-height設置為您需要的box的大小可以實現單行文字的垂直居中”
簡單來說在想要在div或者p居中的時候，只需要把line-height設置成你想要的高度就ok了，不需要設置height
舉個栗子
圖3可以看圖3當中的測試3
下面是對應的代碼
<!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">測試1是高度撐開了div嗎？</div><div class="text2">測試2 那到底是什么撐開的div呢？ </div><div class="text3">測試3 這個是一個居中而且沒有height的測試，能成功嗎？ </div> </body></html>可以明顯的注意到class=text3的已經明顯居中了，但是實際上并沒有設置height
注意：這個是單行元素能這樣玩，如果是多個段落不能這樣玩，會出大事情.
那多行而且是段落怎么辦呢？
<!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">測試1是高度撐開了div嗎？</div><div class="text2">測試2 那到底是什么撐開的div呢？ </div><div class="text3">測試3 這個是一個居中而且沒有height的測試，能成功嗎？ </div><div class="text4"><div class="text41"><p class="textp1">測試4 這個是一個居中而且沒有height的測試，能成功嗎？11</p><p class="textp1">測試4 這個是一個居中而且沒有height的測試，能成功嗎？22</p></div></div> </body></html>比較常見的方案兩種：
1.外部包一個table，使用table布局，里面使用table-cell+vertical-align:middle，雖然丑，但是確實有效.
2. flex (不談了，不懂得可以去查一下)
其他的方法或多或少的有一些小問題，如果有新的方法，歡迎補充。
ps:line-height的一些需要注意注意的點
總結
以上是生活随笔為你收集整理的让div margin属性消失_为什么div里面打一个字之后就会有高度了呢？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python len函数_知识清单Pyt
- 下一篇： word删除分节符后之前的格式乱了_Wo