Q&A
なるほど！一部のインライン要素には高さ、幅、余白を設定できるんですね！よく考えてみればimgタグってheightとwidthが設定できますね
今まで無意識に縦、幅設定してたんですが、改めて今納得しました
imgタグはインライン要素であるはずなのですが、display:blockなしで、
そのままインライン要素の状態で、上下のmarginが効いてしまいます。
インライン要素には上下のmarginが効かないと参考書で読んだのですが、
何故このような事象が発生するのでしょうか？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/test.css"> </head> <body> <img src="img/logo.png" alt=""> <p>aa</p> </body> </html>
img{ margin-top: 20px; margin-bottom: 10px; margin-right: 10px; margin-left: 10px; }
回答2件
0
These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
勝手訳：これらのプロパティは全ての要素に適用されますが、垂直マージンは非置換インライン要素に効果を持ちません。
とあるので、置換要素であるimg要素には効くのでは？
置換要素 - CSS: カスケーディングスタイルシート | MDN
投稿2019/08/27 11:07
総合スコア37413
0
ベストアンサー
こちらの説明を発見したので載せておきます！
投稿2019/08/27 12:21
総合スコア43
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/27 15:38