CSS

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

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

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

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

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

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

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

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

display: inline-block;

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

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

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

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

display: inline-block;

使ってみてください^^

ABOUT ME
大城ゆう
エンジニア歴4年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト担当を経て、現在は自社開発企業のWEBエンジニアとして仕事をしている。
【未経験者歓迎】ゼロスキルからエンジニア転職しませんか?
エンジニアコードは、独自メソッドを元に独学エンジニアを転職に導くプログラムです。
今なら、未経験〜転職までのカリキュラムを3STEPにまとめた
「無料E-BOOK」と「オンライン講座」プレゼント!