html - 将 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 控制台的左上角)。将鼠标悬停在您尝试修复的元素上，然后查看控制台提供的样式值和框模型。