0

ブロック img ではパディングとマージンが機能するのに、インラインでは機能しないのはなぜですか。

CSS での画像のレイアウトに問題があります。各画像間にピクセル (余白、パディングなし) が必要なく、4 つの画像の行が必要です。

パディングまたはマージン (0 に設定) が機能する唯一の方法は、画像のスタイルの一部として display:block を使用する場合です。インラインを使用するとすぐに、各画像とパディングの間にいくつかのピクセルがあり、マージンは無視されます。

とにかく、インラインの画像で独自のパディングとマージンを取得できますか?

4

3 に答える 3

0

では、画像をインラインで表示したいが、ブロックとして機能したいですか？

試しましたdisplay: inline-block;か？

于 2013-03-19T19:15:02.867 に答える
0

1 行に複数の画像を表示する場合はdisplay: block、 andを使用できます。float:left

于 2013-03-19T21:07:13.717 に答える
0

imgallをラッピングdivするのは本当に便利な方法だと思います。

<div class="image">
    <img src="/path/to/image.jpg">
</div>

画像を使用して追加のアクションを追加する場合に便利です。たとえば、400x200 ブロックに収まるようにすべてを切り取りたいとします。あなたはただ行う：

<style>
    .-crop {
        overflow: hidden;
    }
    .-crop img {
        min-width: inherit;
        min-height: inherit;
    }
    .image {
        width: 400px;
        height: 200px;
        min-width: 400px;
        min-height: 200px;
    }
</style>

<div class="image -crop">
    <img src="/path/to/image1.jpg">
</div>
<div class="image -crop">
    <img src="/path/to/image2.jpg">
</div>

画像をラップすると、いくつかのタスクを簡単に解決できます。ホバー時に画像を大きくする必要がありますか? それらはラップされ、imgサイズは変更されますが、変更されないdivため、レイアウトは問題ありません。クリック時に 20px でスライドアップする画像が必要ですか? 同じ話。それらを400x200の領域の中心に配置したいですか？それらはラップされ、 と に追加vertical-alignさtext-alignれdivます。

もちろん、一般的なケースでimgは問題ありません。しかし、突然いくつかのアクションを追加しなければならなくなった場合、それらをラップする必要があります。そのため、現時点で必要がなくても、毎回ラップします。将来のためだけに。

于 2013-03-19T18:42:57.950 に答える