将div缩小为内容大小

你好，我想知道是否有一种方法可以将div缩小到其内容大小（我问，因为我有背景颜色，当文本高度比其他文本高度短得多时它看起来很难看当我把高度：自动它并没有真正缩小到内容的大小，因此，我的意思是我有的文字。有没有一种方法可以提供文本累积高度的空间？如果div高度比内容的总高度高10％或15％？如果你看到我把margin：auto放在这里，但它没有真正的效果。现在这个div在flexbox中，但是我没有认为这是造成这个问题的原因，现在在代码片段中，高度比例是非常好的，但是当我在更大的窗口中完成时，div的高度完全掩盖了文本，因为div的颜色/高度。不增加林E-高度。或者我只需要进行试验和错误，只是改变高度值，直到我找到一些东西？将div缩小为内容大小

-Thanks

.middle { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    order: 2; 
 
    justify-content: center; 
 
\t align-items: center; 
 
} 
 

 
.middle div { 
 
    height: auto; 
 
\t 
 
} 
 

 
.box2 { 
 
\t 
 
\t background-color: #F0ECCA; 
 
\t 
 
\t 
 
}

<div class="middle"> 
 
     
 
     \t <div class="box"> 
 
      \t <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>

来源

2016-10-03 Shinji-san

帮助我在这里，你是否希望在内容周围有10-15px的空间（即：你看到背景色从内容中伸出10-15px）？或者您是否希望背景颜色停止在内容的边缘（即：没有填充）？ – UncaughtTypeError

那么像素会要求我找到内容的确切高度。甚至不确定如何做到这一点。像素或百分比很好，但我认为其他人得到它。完全忘了我可以调整填充/边距，哈哈。 –

保存文本做的正是你希望它是什么div。多余的背景色实际上来自<p>标签。将该元素的margin-top和margin-bottom都设置为0将执行您正在查找的内容。

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

你如何轻松解决这样的问题？打开检查器并选择“选择元素”按钮（在Chrome控制台中左上角）。将鼠标悬停在您尝试修复的元素上，查看控制台提供的样式值和框模型。

来源

2016-10-03 20:42:37 davidatthepark

哦，我明白了。好的，非常感谢。 –

将div缩小为内容大小

回答

相关问题