paddingといえば下記が有名ですが
【css】IE11でmain要素にpaddingが効かないのはdisplay:inlineだから
IE11のmain要素以外にもpaddingが効かなくなることはよくあります。
目次
dispalyをinline-blockやblockに明示的に変えないと、paddingが効かないorバグる
aタグやspanタグなどにpaddingを指定するときは、displayを指定しないと(display:inlineのままだと)paddingの効き方がおかしくなります。
![](https://deep-space.blue/main/wp-content/uploads/2019/04/img_5cb862b2e4bff.png)
![](https://deep-space.blue/main/wp-content/uploads/2019/04/img_5cb862f08e827.png)
この例では、display:inlineのほうはpaddingがほかの要素に食い込んで(重なって)しまっています。
なぜかpaddingのつく位置がおかしく見える
![](https://deep-space.blue/main/wp-content/uploads/2019/04/img_5cb864b930eaa.png)
![](https://deep-space.blue/main/wp-content/uploads/2019/04/img_5cb864fcea8c9.png)
![](https://deep-space.blue/main/wp-content/uploads/2019/04/img_5cb864e8c1e64.png)
floatで横並びにした要素(div)を囲んでいる要素(.float)にpaddingをつけた場合、
paddingが要素の上だけについているように見える。
実際には、.floatの高さが0になっていて、中のdivが要素からはみ出ている状態。
囲んでいる要素.floatにoverflow:hidden;やclearfixをつけると直る。
![](https://deep-space.blue/main/wp-content/uploads/2019/04/img_5cb8679755e4b.png)
★修正済み★Firefoxでdisplay:flexの要素の子要素に、padding-topとpadding-bottomが効かない
padding:5%;
と書いても、上下のpaddingがつかない問題。
★こちらはfirefox60.2では修正済みで、59以下で発生する模様
![](https://deep-space.blue/main/wp-content/uploads/2019/04/img_5cb7243830491.png)
コメント
コメント一覧 (1件)
[…] 【css】paddingが効かないと思ったらdisplayを疑え! floatにも注意 […]