6

理由もなく、写真の下にこの迷惑なスペースがあります。フレームワークとして www.getskeleton.com を使用しています。

HTMLコード

<div class="four columns bottom">
  <div class="box">
    <img src="images/picture.png" title="" alt="">
  </div>
</div>

CSS コード

.box{
  border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}

写真の下のスペースはこちら

4

7 に答える 7

10

これはその後解決されたと確信していますが、これらの回答はどれも正しくないと思います（または、少なくとも「受け入れられた」回答からのリンクは無効です）。

この間隔の問題に対処する方法 (そして、正規化などの util ライブラリで設定されていない理由はわかりません) は、画像の垂直方向の配置です。これにより、HTML 5 doctype を使用する場合の HTML ページの問題が解決されます。奇妙なことに、たとえば HTML 4.01 doctype を使用する場合、画像は動作の下にこの誤ったスペースを示しません。

修正:

img {
  vertical-align: top;
}

この問題に遭遇した可能性のある人に役立つことを願っています。

編集：これを書いた後に気づいたいくつかの追加情報と、その後正規化がimgタグに配置を設定しない理由を調査しました。画像のデフォルトの位置合わせはvertical-align: baseline;、下にスペースを導入する動作です。Normalize の作成者は、この動作はクロスブラウザーで一貫していると考えているため、これを「正規化」しないことにしました。画像の隣にあるテキストを後続のテキスト行と適切に揃えたい場合、これは理にかなっていると思います。この問題に対処するために、 top ではなくを使用することを好む人もvertical-align: middleいます。そのため、必要に応じてこれを変更できます。

ただし、ベースラインの配置に関しては、画像が大きすぎて行の高さよりも高い場合、おそらくそれを浮かせたり、他の動作をしたりするでしょう...しかし、そこに行きます。

私は何の問題もなく、しばらくの間垂直整列のものを使用しました。ただし、いつものように、画像がベースラインに合わなくなった場合の影響を必ずテストしてください。

于 2014-10-28T12:17:58.863 に答える
2

これを試して：

.box img {
    display: block;
    padding: 0px;
    margin: 0px;
}
于 2012-12-17T15:28:19.570 に答える
1

これを試してください：.box {font-size：0; }

于 2012-12-17T15:30:04.997 に答える
0

これは古くからの癖です。行の書式設定の空白がギャップを引き起こしています。画像の後に追加 <br /> します。

于 2012-12-17T16:28:57.330 に答える
0

あなたのイメージを浮かべる必要があります。これを試して：

    #yourimage{
        float: left;}
于 2012-12-17T15:43:11.893 に答える
0

前述のように、より多くの情報が大いに役立ちますが、ボーダーが画像からはみ出す原因となっているのはパディングであることは間違いありません。理由は非常に単純です。

margin pushes outside the element
padding pushes inside the element

いわば。

次に修正します。

.box {
    padding-bottom: 0px;
}
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help
.box img {
    margin-bottom: 0px;
}
于 2012-12-17T16:18:05.697 に答える