記事内に商品プロモーションを含む場合があります
htmlの学習を進めていくと、ブロックタイプ要素とインライン要素があることに気がつきます。
ブロックタイプ要素とは、文字通り、それ単体でブロック仕様になっており、一行単位でコンテンツ化できるものを言います。
それに対してインライン要素とは、ブロックタイプ要素の中にあるものであり、例えばspanとか、aタグあたりが代表的なものになります。
インライン単体では、中の文字が横幅になっており、aaaであれば、このa3つ分のサイズがインラインの幅と言うことです。
改行はされず、文字が続くことになります。
・・・・と、なると、そのインラインの性質上、marginをかけられなくなるのです。
試しにインライン要素にmarginをかけてみてください。
余白がかからないようになっているはずです。
でもどうしてもインライン要素に余白を空けたい場合、次のCSSをかけることで、それが可能になります。
display: inline-block;
これはどのようなプロパティなのでしょうか？
「インラインの要素を保ちながら、ブロックタイプ要素の性質を持ってますよ」というものです。
つまり、これまでインラインではかけられなかったmarginが、このCSSをかけることで、ブロックタイプ要素の性質を持たせて、適用させられるようになるというものなのです。（とっても便利！）
したがってインラインでもmarginをかけたい時は、このCSSを使用しましょう！
display: inline-block;
使ってみてください^^
