2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

marginとfloatの関係

Posted at

marginとfloatは、密接な関係にある。floatを使いこなすには、marginの理解は必須である。

marginのかかっている要素に、floatを指定した場合

親、子に関わらずmarginを指定している要素に、floatを適用すると相殺をしなくなる。また前の記事の、widthとmargin:auto;の関係で記載したようにwidthとmarginを指定した場合のautoは、数値を自動算出する。ただし、floatが指定されると、marginのautoは、必ず数値が0になる。
margin:auto;とfloat;を指定した場合の例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/1def15bc-28d3-b02a-bbc5-ff30b43a1514.png)

・親か子のどちらかでもfloatを指定すると、親子での相殺が起こらない。
・floatが指定されると、margin:auto;は絶対的に0になる。
・兄弟同士にfloatが指定されていると、相殺が起こらない。

floatを使用すると、その要素のmarginはpaddingのような挙動を行う。

marginのかかっている要素に、floatが隣接している場合

floatが親、この要素にかかると相殺が発生しない。ただ、floatが隣接しているだけなら、marginとfloatで相殺が発生する。以下はその基本的な条件。

・floatに隣接
・隣接している要素に、marginが指定されている
・隣接されている要素に、floatが指定されていない

上の条件が全てではない。様々は影響により、相殺が発生する場合としない場合があるので割愛。
以下、marginとfloatと相殺の例。

floatとmarginの相殺

image.png

上のソースをまっさらはHTMLに貼った場合、図のようにはならない。理由は、bodyと.testで親子の相殺が発生し、.testのmargin-topを、親のbodyが引き継いでしまうため。

body {
border:1px solid #fff;
}

上のソースを追記してみる。親にborderが入ることによって、親子での相殺が発生しなくなり、図のような動きをするはず。

1つの要素にmarginとfloatが指定されていると、marginの相殺が起きない。
しかし、上の例のmarginとfloatが相殺する条件を満たしているので、図のようん動きをする。そして、この相殺はfloatを解除するclearプロパティにも関係してくる。

clearは、floatを解除するものではない。

「floatを解除する」とよく説明されるclearプロパティだが、floatに隣接してはならないかを指示するプロパティ。その挙動は、先ほどのサンプルによく似ている。
clearは、marginの相殺を抑制し、floatの底辺に要素がつくように、margin-topの値を自動調整するような振る舞いを行う。
clear: none; の場合は、通常通りに振る舞う。
以下、margin, float, clearの例である。

image.png
image.png
image.png

.clearにmargin-topに3000pxも指定している。本来なら、3000pxの間隔が空くはずだが、float:leftを指定したimgの底辺にくっついてしまっている。
これは、clearによる仕様である。clear:left;を指定したことによって、marginーtopが自動調節されて、float:left;の指定された要素の後ろにつく。さらに、float:right;を指定した.rightの底辺(marginを含む
)には、.clear-rightの上辺が重なっている。この場合、.rightの上辺から底辺までのmargin-topを調整しているわけではない。.clearから.rightまでの底辺までの距離で、margin-topを調整している。

なぜなら、隣接するfloatを指定した要素とmarginは、相殺関係になるが、.clearのように隣接する要素とmarginに相殺関係が発生しない場合は、そこからが出発点になる。clearとmargin-topを同時に適用すると、clearプロパティが優先されるので気をつける。

相殺の利点

ややこしい、marginだが、間隔をあけたい場合。相殺など利用することにより、クリーンなソースコードが書ける場合も多くある。レイアウトをmarginで書いたものと、paddingで書いた物を比較する。

完成するレイアウト
image.png

image.png
image.png
image.png

image.png
image.png
image.png

marginの相殺を利用した物と、paddingを使ってレイアウトを組んだ物の比較。paddingを使用すると、最後の要素は、padding-bottom:0;を指定したり、classを細かく割り切ったりする。
.my10.mt20などのクラスを用意している人は、paddingのような指定を行っていることが多い。それに対して、marginの相殺を利用すると、HTML,CSSともに、短く書くことができる。
さらに適切に間隔を保つことができるので、特にCSSを指定していないimg要素がイレギュラーに入ったとしても、ある程度は容易に対処することができる。
image.png
上記サンプルは、相殺をうまく利用した例。デザインによっては、親にborderやpaddingなどを入ることにより。、相殺が使えない場合もある。しかし、相殺を理解していることで、HTMLやCSSの書く効率が変わってくる。

ブラウザのデフォルトスタイルシート

ブラウザのデフォルトスタイルシートは、marginと関連がある。h1やpなどの要素には、ブラウザで、あらかじめCSSがついている。
h1 {
margin:0.67em 0;
font-size:2em
}
p {
margin:1em 0;
}
相殺を計算された上で、上下にmarginを指定されている。このスタイルしーとによって、”文章”を適切にマークアップすれば、適度な間隔を保つようになっている。
デフォルトスタイルシートを生かすように構築する場合は、相殺の考え方が大切になる。
marginは仕様とバグは、度々一緒にされることがある。
marginは、奥深く、経験もある程度必要になる。
marginのバグも回避策は多く存在するので、マスターすればCSS構築に役立ってくれるプロパティになるはず。

引用元(参考元):https://kojika17.com/2012/08/margin-of-css.html

今回も、勉強させていただき、ありがとうございました。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?