私は同じものを与えても、オブジェクトの高さが異なるのはなぜですか？

Question

マイHTML：あなたが見ることができるように

.title-card { 
 
    display: block; 
 
    height: 56.25vw; 
 
    width: 100%; 
 
} 
 

 
.title-overlay .title { 
 
    color: white; 
 
    background-color: rgba(255, 0, 0, 1); 
 
    font-weight: 100; 
 
    font-size: 2em; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    padding: 1em; 
 
} 
 

 
.title-overlay { 
 
    position: absolute; 
 
    left: 15%; 
 
    display: table; 
 
    width: 70%; 
 
    height: 56.25vw; 
 
} 
 

 
.background { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 56.25vw; 
 
} 
 

 
.background-overlay { 
 
    font-size: 0; 
 
}

<div class="title-card"> 
 
    <div class="background-overlay"> 
 
    <img src="https://i.ytimg.com/vi/3RMr6m1B-qM/maxresdefault.jpg" class="background"> 
 
    </div> 
 
    <div class="title-overlay"> 
 
    <div class="title"> 
 
     Hello there, and welcome! This site is still unfinished but feel free to look around. 
 
    </div> 
 
    </div> 
 
</div>

は、私の高さのすべてを56.25vwに設定されています。しかし、実際のページでは、タイトルカードと背景の高さは698.52ピクセルで、タイトルオーバーレイの高さは698.18ピクセルです。私の計算機によると、698.52ピクセルが正しい高さになるはずです。だから私のタイトルオーバーレイは少し短くなっているのですか？

Answer 1

ディスプレイ：表;ブロック要素とは異なる高さを計算します。

私は正確にはわかりませんが、私の推測では計算のどこかで半分のピクセルが許されていないということです。

たとえば、すべての高さを300ピクセルに設定し、すべての要素の高さを300ピクセルに設定します。高さを300.75ピクセルに設定すると、ブロック要素は300.75ピクセルになり、テーブル要素は300ピクセルになります。

問題を解決するには、テーブルの使用をやめることをお勧めします。

同じようにすべてを中央に揃えたい場合は、ラインハイトで56.25vwのインラインブロック要素を使用し、内部にinline-block要素を置き、line-height：normal;

以下の例：

.title-card { 
 
    display: block; 
 
    height: 56.25vw; 
 
    width: 100%; 
 
} 
 

 
.title-overlay .title { 
 
    font-weight: 100; 
 
    font-size: 2em; 
 
    line-height: normal; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    padding: 1em; 
 
} 
 

 
.title-overlay .title-container { 
 
    color: white; 
 
    background-color: rgba(255, 0, 0, 1); 
 
    display:inline-block; 
 
    line-height:56.25vw; 
 
} 
 

 
.title-overlay { 
 
    position: absolute; 
 
    left: 15%; 
 
    display: block; 
 
    width: 70%; 
 
    height: 56.25vw; 
 
} 
 

 
.background { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 56.25vw; 
 
} 
 

 
.background-overlay { 
 
    font-size: 0; 
 
}

<div class="title-card"> 
 
    <div class="background-overlay"> 
 
    <img src="https://i.ytimg.com/vi/3RMr6m1B-qM/maxresdefault.jpg" class="background"> 
 
    </div> 
 
    <div class="title-overlay"> 
 
    <div class="title-container"> 
 
    <div class="title"> 
 
     Hello there, and welcome! This site is still unfinished but feel free to look around. 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

.title-card { 
 
    display: block; 
 
    height: 56.25vw; 
 
    width: 100%; 
 
} 
 

 
.title-overlay .title { 
 
    color: white; 
 
    background-color: rgba(255, 0, 0, 1); 
 

 
    font-weight: 100; 
 
    font-size: 2em; 
 

 
    display: table-cell; 
 

 
    vertical-align: middle; 
 
    text-align: center; 
 

 
    padding: 1em; 
 
} 
 

 
.title-overlay { 
 
    position: relative; 
 
    left: 15%; 
 

 
    display: table; 
 

 
    width: 70%; 
 
    height: 60vw; 
 
} 
 

 
.please-work { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    
 
    width: 100%; 
 
    height: 56.25vw; 
 
} 
 

 
.background { 
 
    position: absolute; 
 

 
    width: 100%; 
 
    height: 56.25vw; 
 
} 
 

 
.background-overlay { 
 
    font-size: 0; 
 
}

<div class="title-card"> 
 
     <div class="background-overlay"> 
 
      <img src="https://i.ytimg.com/vi/3RMr6m1B-qM/maxresdefault.jpg" class="background"> 
 
     </div> 
 
     <div class="please-work"> 
 
      <div class="title-overlay"> 
 
       <div class="title"> 
 
        Hello there, and welcome! This site is still unfinished but feel free to look around. 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

まあ、私は自分自身嫌なことがわかりました "修正"。私はそれに本当に満足していないが、それがうまくいくならそれはうまくいくと思う。