コンテンツのサイズにdi​​v要素を縮小

Question

こんにちは私は背景色を持っており、テキストの高さが他の部分よりもはるかに短い場合、それは単に醜いので、そのコンテンツのサイズまでのdivを縮小する方法は（私が尋ねるがあると思いまして私が高さを置くとき、それは本当に内容のサイズに縮小していない、それは私が持っているテキストを意味します。テキストの累積高さを超えて部屋を提供する方法はありますか？ divの高さをコンテンツの全高より10％または15％高くしたいのですか？ここにmargin：autoを入れても、実際には効果はありません。このdivはフレックスボックスに入っていますが、その問題を引き起こしていると思っています。スニペットでは、高さの比率は完全に問題ありませんが、大きなウィンドウで行うと、divの高さはdivの色/高さのためにテキストを完全に覆います。林業を増やさないe-height。あるいは試行錯誤をして、何かを見つけるまで高さの値を変更するだけでいいですか？

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

Answer 1

テキストを保持しているdivは、あなたがそれをすることを期待正確に何やっています。過剰な背景色は実際に<p>タグから来ています。その要素のmargin-topとmargin-bottomの両方を0に設定すると、探していることができます。

は、なぜ私たちは手動で<p>の余白を変更する必要がありますか？ <p>タグには、ブラウザが提供するデフォルトのマージンがあります。

どのように簡単に、このような問題を解決するのですか？インスペクタを開き、「要素を選択」ボタン（クロムコンソールの左上）を選択します。修正しようとしている要素にカーソルを合わせ、コンソールが提供するスタイル値とボックスモデルを確認します。