DIV を普通に使って中にコンテンツを入れると、DIV の横幅は中身の幅に同期しないので、inline-block を指定しました。そのおかげで横幅はぴったりになりましたが、縦の高さが何故か 2px 大きくなるので、line-height: 0px; を指定してみると、見事に綺麗に収まりました。
デモ
ただ、<!DOCTYPE html> で、HTML5 指定している場合に起きるのでこのブログでは必要ありません。
<style>
.shadow_bug {
display:inline-block;
box-shadow: 10px 10px 20px #000;
}
.shadow_div {
display:inline-block;
box-shadow: 10px 10px 20px #000;
line-height: 0px;
}
</style>
<div class="shadow_bug">
<iframe width="420" height="315" src="https://www.youtube.com/embed/L_QVB4Qdh6o" frameborder="0" allowfullscreen></iframe>
</div>
<br><br><br><br>
<div class="shadow_div">
<iframe width="420" height="315" src="https://www.youtube.com/embed/L_QVB4Qdh6o" frameborder="0" allowfullscreen></iframe>
</div>
関連する Stack Overflow
Why display=inline-block adds uncontrollable vertical margins
posted by
at 2015-02-27 00:39
|
テクニック
|
|
