Hatena::Groupweb

vantguarde

 | 

4.26

マージンの相殺というか折りたたみを起こさせないプロパティ

| 22:30

どうでもいいんですが、あまり「相殺」って表現は適切ではないような気がするんですよね。とはいえ「折りたたみ」というのもなんかしっくり来ない。「折りたたまれたマージン」って書くとなんか「残されたお料理」みたいですし。

さて、本題に戻って。たまーにですが、margin collapsingが発生している事に気づかずに「あれっ」って思って、調べて「うあーそうだった」ってなることがあります。ただ、なんとなく border: 1px transparent とか padding に変えたりする対処って、しっくり来ないんですよね。まあ、てきとーに対応するんですが。

ただなんか、WebKitにはそれを制御するプロパティがあるっぽいですね。全然知らなかった。

-webkit-margin-collapse

Specifies the behavior of an element’s vertical margins if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

Safari CSS Reference: Supported CSS Properties

隣接したもののみなので、親子関係にあるものの制御はできないっぽいですけど。

ちなみに知ったのはDave Hyattのポストだったり。WebKitおもしろいなあ。

 | 
Contact: @vant / lepetitcroissant@gmail.com.