インライン要素でもmarginをかけられる!

htmlの学習を進めていくと、ブロックタイプ要素とインライン要素があることに気がつきます。

ブロックタイプ要素とは、文字通り、それ単体でブロック仕様になっており、一行単位でコンテンツ化できるものを言います。

それに対してインライン要素とは、ブロックタイプ要素の中にあるものであり、例えばspanとか、aタグあたりが代表的なものになります。

インライン単体では、中の文字が横幅になっており、aaaであれば、このa3つ分のサイズがインラインの幅と言うことです。
改行はされず、文字が続くことになります。

・・・・と、なると、そのインラインの性質上、marginをかけられなくなるのです。

試しにインライン要素にmarginをかけてみてください。
余白がかからないようになっているはずです。

でもどうしてもインライン要素に余白を空けたい場合、次のCSSをかけることで、それが可能になります。

display: inline-block;

これはどのようなプロパティなのでしょうか?

「インラインの要素を保ちながら、ブロックタイプ要素の性質を持ってますよ」というものです。

つまり、これまでインラインではかけられなかったmarginが、このCSSをかけることで、ブロックタイプ要素の性質を持たせて、適用させられるようになるというものなのです。(とっても便利!)

したがってインラインでもmarginをかけたい時は、このCSSを使用しましょう!

display: inline-block;

使ってみてください^^