2015年02月27日


DIV に入れて、ドロップシャドウ( inline-block で、縦のスペースを取り去る方法 )

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 | Comment(0) | テクニック | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Loading
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。