將div縮小到內容大小

Question

您好，我想知道是否有一種方法可以將div縮小到其內容大小（我問是因為我有背景色，並且當文本高度比其他div短得多時，它看起來很難看。顏色：當我將height設置為auto時，它並沒有真正縮小到內容的大小；我的意思是我擁有的文本。有沒有辦法提供超出文本累積高度的空間？例如讓div高度為10或15高於內容總高度的百分比嗎？如果您看到我在此處放了margin：auto，但效果不佳。目前，該div位於flexbox中，但我認為這不是問題所在。片段的高度比例非常好，但是當我在更大的窗口中進行操作時，由於div的顏色/高度，div的高度會完全遮蓋文本，而我寧願不增加行高。我只需要反復試驗，然后更改高度值，直到找到合適的東西為止？

-謝謝

 .middle { display: flex; flex-flow: column wrap; order: 2; justify-content: center; align-items: center; } .middle div { height: auto; } .box2 { background-color: #F0ECCA; } 

 <div class="middle"> <div class="box"> <h2> Overview <h2> </div> <div class="box2"> <p>"Yo yo dab dab sample sample sample this is a sample sentence this is a sample sentence this is a sample sentence this is a sample sentence this is a sample sentence this is a sample sentence. </p> </div> </div> 

Answer 1

包含文本的div確實在執行您期望的操作。 多余的背景顏色實際上來自<p>標記。 將該元素的margin-top和margin-bottom都設置為0將完成您要查找的操作。

為什么我們需要手動更改<p>的邊距？ <p>標簽具有瀏覽器提供的默認邊距。

您如何輕松解決此類問題？ 打開檢查器，然后選擇“選擇元素”按鈕（在chrome控制台的左上方）。 將鼠標懸停在您要修復的元素上，並查看控制台提供的樣式值和框模型。