【css】paddingが効かないと思ったらdisplayを疑え! floatにも注意

paddingといえば下記が有名ですが
【css】IE11でmain要素にpaddingが効かないのはdisplay:inlineだから

IE11のmain要素以外にもpaddingが効かなくなることはよくあります。

dispalyをinline-blockやblockに明示的に変えないと、paddingが効かないorバグる

aタグやspanタグなどにpaddingを指定するときは、displayを指定しないと(display:inlineのままだと)paddingの効き方がおかしくなります。

display:inline(デフォルト)
display:inline-block

この例では、display:inlineのほうはpaddingがほかの要素に食い込んで(重なって)しまっています。

なぜかpaddingのつく位置がおかしく見える

 

floatで横並びにした要素(div)を囲んでいる要素(.float)にpaddingをつけた場合、
paddingが要素の上だけについているように見える。

実際には、.floatの高さが0になっていて、中のdivが要素からはみ出ている状態。

囲んでいる要素.floatにoverflow:hidden;やclearfixをつけると直る。

★修正済み★Firefoxでdisplay:flexの要素の子要素に、padding-topとpadding-bottomが効かない

と書いても、上下のpaddingがつかない問題。

★こちらはfirefox60.2では修正済みで、59以下で発生する模様