ブロック要素とインライン要素

HTMLの要素には、主にブロック要素とインライン要素があります。

ブロック要素は、コンテンツをまとめるブロック(かたまり)です。親要素の幅いっぱいに広がるボックスをイメージすると良いでしょう。横並びにできません。高さや余白の指定ができます。

<div>や<p>などがブロック要素です。

インライン要素は、ラインの中の要素、つまり文の行に使われることを想定した要素です。主にブロック要素の中で使われます。横並びにできます。高さや余白の指定はできません。

<a>や<span>などがインライン要素です。

ブロックかインラインかは要素ごとに決まっています。変更したい場合は、CSSのdisplayプロパティを使います。

ブロック要素に変更するには、「display:block;」とします。

インライン要素に変更するには、「display:inline;」とします。

両方のいいとこ取りをした「インラインブロック要素」もあります。横並びにしたいけど、高さも指定したいという場合は「display:inline-block;」でインラインブロック要素に変えてあげます。

CSSのdisplay:block;とは?ブロック要素について詳しく解説 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
こんにちは!ライターのナナミです。 HTMLやCSSで欠かせない、ブロック要素やインライン要素。正直なんだかよくわからないけど、とりあえず使っていたりしませんか?そんなあなたのために、今回はdisplay:block;について徹底解説! ブロック要素とは display:block;について レイアウトの例 を紹介して...
CSSのdisplayプロパティとは?使い方や特徴を解説 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
こんにちは!ライターのナナミです。 WEBサイトを作りに欠かせない、ブロック要素やインラインブロック要素。 そんな要素の種類を、CSSで調整できるってご存知ですか? ということで、今回はdisplayを徹底解説! ・ブロック要素とインライン要素のおさらい ・displayの使い方 ・display活用の具体例 を紹介し...
ブロックレベル要素とインライン要素-HTMLの基本
HTMLの基本解説・チュートリアル

コメント

  1. […] ブロック要素とインライン要素HTMLの要素には、主にブロック要素とインライン要素があります。ブロック要素は、コンテンツをまとめるブロック(かたまり)です。親要素の幅いっぱいに […]

タイトルとURLをコピーしました