1

CSS初心者なので、どなたか教えていただけないでしょうか。私はいくつかのチュートリアルに取り組んでおり、いくつかのポップアップ画像で少し遊んでいました。

私の人生では、サムネイル間の4pxのギャップがどこから来ているのかを理解することはできません.

色付きの四角形の間に 12 ピクセルの余白を設けて小さなギャラリーを配置したかったのですが、独自の余白を追加すると、かなり奇妙な動きをします。私は間違った方法でそれをやっていますか？

ここにすべてのコードがありますhttp://jsfiddle.net/p45JH/5/

使用している CSS コードは次のとおりです。

.thumbnail {
    position: relative;
    z-index: 0;
}
.thumbnail:hover {
    background-color: transparent;
    z-index: 50;
}
.thumbnail span {

    position: absolute;
    background-color: white;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    padding: 5px;
    left: -1000px;
    border: 1px solid #CCC;
    visibility: hidden;
    color: black;
    text-decoration: none;
}
.thumbnail span img {

    border-width: 0;
    padding: 2px;
    vertical-align:bottom;
}
.thumbnail:hover span {

    visibility: visible;
    bottom: 35px;
    left: 35px;

}

それは本当に単純なことだと確信しています。私の限られた知識がそれを理解するのを妨げているだけです。

ご協力いただきありがとうございます。

4

2 に答える 2

0

リンクの代わりに div を使用してみてください。Html コードのリンク間のスペースを削除してみてください: http://jsfiddle.net/soyuka/p45JH/6/

スペースなし : (パディング/マージンなし)

<a href=""> </a><a href=""> </a>

スペース : (通常のギャップを実行)

<a href=""> </a>
<a href=""> </a>
于 2013-02-08T15:36:34.290 に答える
0

空白です。inline (および inline-*) 要素間のスペースは尊重されます。それらをコメントアウトすることができます：

<a class="thumbnail">...</a><!--
--><a class="thumbnail">...</a>

または、ここにある他のテクニックのいずれかを使用してください: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-02-08T16:10:28.340 に答える