サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
creatormemo.com
画像をdivやh1タグなどのブロック要素に入れると画像の下に数ピクセルほどの隙間ができてしまいます。気にするほどのことでもない範囲ではありますが、デザイン上1pxのずれもだしたくない場合はこの不要な余白を取り除く必要があります。ここではそれを解決する３つの方法を紹介します。 まず通常だと下記のように画像とその下の赤いボーダーの間にスペースができてしまいます。 解決法１ CSSで画像のdisplay属性をblockに指定する。 img{ display:block; } 解決法２ CSSで画像のvertical-alignをbottomに指定する。 img{ vertical-align: bottom; } 解決法３ CSSで親ブロックのline-heightを0にする。 .box{ line-height:0; }
positionを多用してレイアウトしていると親BOXの高さが潰れてしまうことがよくありますね。デザイン上問題なければそのまま放ったらかしにしてもよいのですが、CSSなどで親要素を装飾したい場合はしっかり高さを復活させてあげましょう。 基本的にはCSSで親要素の高さを指定すればいいですが、小要素の高さが変動したり、レスポンシブなどで配置が変わったりする場合に対しては通常の指定方法だと対応できません。そんなときはjQueryで簡単に解決することができます。 jQueryで潰れた親要素の高さを復活させる方法 例えば次のような場合。 [HTML] <div class="parentBox"> <div class="childBox">Box</div> </div> [CSS] .parentBox{ position:relative; width:100%; border:solid 1
このページを最初にブックマークしてみませんか？
『creatormemo.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
