web-dev-qa-db-ja.com

ボーダー半径とパディングがうまく機能しない

画像の半径を取得しようとして問題が発生しました。私は問題を単純化し、デモンストレーションの目的で変数を誇張しました。

[〜＃〜] css [〜＃〜]：

div.wrap img {
    -moz-border-radius: 50px;
         border-radius: 50px;
}
img.pic {
    padding: 15px 25px 35px 45px;
}

[〜＃〜] html [〜＃〜]：

<div class="wrap">
    <img class="pic" src="http://i.imgur.com/UAef0.jpg"
         width="300" height="300" />
</div>

パディング、プーフ、きれいなコーナーを削除すると。それが助けになるなら、彼らが2つの異なるクラスにいる理由があります。 「ラップ」には、複数の「ピック」を含めることができます。同じクラスになることもあれば、そうでないこともあります。次のように並べ替えます。

img.left_pic  { float:left;  padding:5px 10px 5px 5px; }
img.right_pic { float:right; padding:5px 5px 5px 10px; }

どんな助けや洞察もいただければ幸いです。

jsFiddle： http://jsfiddle.net/NwfW6/

解決策のために編集：

これ 私が基本的にやろうとしていたことは多かれ少なかれでした。私は「当たり前」の瞬間を過ごしていたと思います。使用する必要のある宣言はmarginnotpaddingだったと確信しています。正しい方法でそれを行う方法を私に思い出させてくれたGGJへのもう一つの感謝。そして、Janが「img」タグにパディングを追加することについて言ったことは意味がありません、それは意味がありません。私の悪い。

imagepaddingcss
19
Curtis Cook

境界線の半径はパディングの外側になります。代わりに、境界線の外側にスペースを空けるマージンを設定してみてください。

27
GGJ

画像ではなく「折り返し」にパディングを設定します（画像にパディングを設定してもあまり意味がありません:)）。これで問題が解決するはずです。

5
Jan Hančič

これは、一部のブラウザ（ほとんどの場合IE and safari）で、パディングとborder-radiusの両方を同じ要素に適用した場合の副産物です。border-radiusは、ボックスの境界コンポーネントの曲率を変更します。パディングコンポーネントを囲むモデル。

他の回答に加えて、問題を修正しているように見える別の興味深いことは、境界線を追加することです。境界線を表示したくない場合は、次のようにborder: 1px solid transparentを使用できます。

.invisible-border {
    border: 1px solid transparent;
}

jsFiddleのデモ

screenshot

4
KyleMit

spanの代わりにimgでも同じ問題が発生しました。両方のタグのdisplay値が異なるため、まったく同じシナリオではありません（ this SO thread を参照）。

私の場合、display:inline-blockをspanに設定するとすべてが修正されました。

0
Mario Vázquez