Question

您好我想知道有没有办法将div缩小到其内容大小（我问，因为我有背景颜色，当文本高度比div的其余部分短得多时，它看起来很丑陋填充颜色？当我把高度：自动它没有真正缩小到内容大小;我的意思是我的文本。有没有办法提供超过文本累积高度的空间？喜欢有div高度比内容的总高度高10％或15％？如果你看到我把margin：auto放在这里但它没有真正产生效果。现在这个div在一个弹性箱中但我不喜欢认为这导致了问题。现在在片段中，高度比非常好，但是当我在更大的窗口中进行时，div的高度完全遮盖了文本，因为颜色/高度很高。我不想增加行高。或者我只需要做试验和错误，只需改变高度值，直到找到一些事？

-Thanks

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

保存文本的div完全符合您的预期。多余的背景颜色实际上来自<p>标签。将margin-top和margin-bottom都设置为0可以满足您的要求。

为什么我们需要手动更改<p>的边距？ <p>代码具有浏览器提供的默认边距。

您如何轻松解决此类问题？打开检查器，然后选择＆＃34;选择一个元素＆＃34;按钮（在Chrome控制台的左上角）。将鼠标悬停在您尝试修复的元素上，然后查看控制台提供的样式值和框模型。

缩小div到内容大小

1 个答案: