marginやpadding、floatの注意点

インライン要素について

  • marginpaddingの左右は効くが、上下は効かない。
  • width、heightが効かない。
  • borderbackgroundは効く。
  • imginputtextareaは全てブロック要素と同様、marginやpaddingなどすべて効く。


marginの相殺について

  • marginの相殺は左右では起こらず、上下に起こる。
    • ただしfloatが指定されている場合は、相殺は起こらない。


displayについて

  • display:inline; を使うと、インライン同様、marginpaddingの上下、widthheightプロパティは効かない。
  • display:inline; を使うと、インライン同様、ブロック要素が横に並ぶ。


floatについて

  • floatを指定したら、必ずwidthを指定しなければならない。
  • floatを適用した親要素の子要素高さは0になる
    • clearfixoverflow:hidden;を親要素に追加すれば、floatを適用した子要素は指定した高さになる。
    • floatの次の要素がデバイスの幅によってfloatした要素の隙間に入ってきてしまう可能性があるので、overflow:hidden;は必ず指定する。
    • もしくはclear:both;を次の要素に指定する。
  • 左端に要素が寄ってしまう場合は、margin-left:を指定する。


hrt0kmt.hatenablog.com