Help us understand the problem. What is going on with this article?

【HTML】ブロックレベル要素 インライン要素 インラインブロック要素 の違いは?

ブロックレベル要素

単にブロック要素とも。
ブロック = 塊 として扱われる。

特徴

  • 改行を伴う
    • 縦に要素が並ぶ
  • width , heigth でサイズが指定できる
  • margin , padding で余白が指定できる
代表的なタグ
<p>
<h1>-<h6>
<div>

インライン要素

ブロックレベル要素の内容として用いられる。

特徴

  • 改行を伴わない
    • 横に要素が並ぶ
  • width , heigth でサイズが指定できない
  • margin , padding で左右に対してのみ余白が指定できる
代表的なタグ
<a>
<input>
<span>

インラインブロック要素

2つの特性を併せ持つインラインブロック要素。
ブロック = 塊 として扱われるが、改行を伴わない。
主にブロック要素を横並びにしたいときに用いられる。

特徴

  • 改行を伴わない
    • 横に要素が並ぶ
  • width , heigth でサイズが指定できる
  • margin , padding で余白が指定できる

使用方法

CSS の display プロパティで inline-block を指定することでインラインブロック要素になる。

div {
  display: inline-block;
}

この場合、div タグがすべて横並びに表示されるようになる。

まとめ

要素 改行 サイズ指定 余白指定
ブロック する できる できる
インライン しない できない 左右のみできる
インラインブロック しない できる できる
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away