1

何らかの理由で、div の下部に余分なパディングがあり、その中に画像が保持されているようです。

JSFiddle は次のとおりです: http://jsfiddle.net/KSs7V/

それがどのようにそこに到達したか/それを修正する方法について何か考えはありますか?

CSS:

.artist-box {
    width: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
}

.artist-pic {
    height: 245px;
    margin: 0;
    /*box-shadow: 0 0 10px black;*/
}
#artist-wrap {
    max-width: 1800px;
    margin-top: 5px;
}

.indArtistBox {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    border: 1px solid #000;
}
4

1 に答える 1

6

イメージ ルールにvertical-align:topまたはを追加するだけです。display:block

.artist-pic {
    height: 245px;
    margin: 0;
    vertical-align:top;
    /*box-shadow: 0 0 10px black;*/
}

jsFiddle の例

別のオプションはfont-size:0、イメージ コンテナー div に追加することです。

.indArtistBox {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    border: 1px solid #000;
    font-size:0;
}

jsFiddle の例

ギャップは、画像がインライン要素であるため、ディセンダー要素 (「j」、「g」、「y」など) 用に予約されたスペースが原因です。

于 2013-06-08T01:40:40.377 に答える