1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[css]inline-blockとは

Posted at

はじめに

以下のリンクに画像例を使ってめちゃくちゃわかりやすく書いてある。これをみよう。

ブロックレベル要素とインライン要素の違い
インラインブロック要素の性質と使い方

概要

HTMLコンテンツの振る舞いの一種のこと。
HTMLコンテンツ(divタグやaタグなど)の振る舞い(改行したり、横幅が調整できたり)は主に二つある。

ブロックレベル要素

divタグなど。
入れると必ず前の要素から改行して入るブロックのように振る舞うやつ

インライン要素

spanタグなど。
ブロックのように振る舞わず、前の要素から改行せずに入る。
インライン要素を色付けしても、マーカーのように文字に被せるようになり、width,heightを指定できない。

インラインブロック要素

これら2つの要素の特徴をいい感じに取り入れたのがインラインブロック要素。以下の性質を持つ

  • 横幅と高さが指定できる。
  • ブロック要素と同じ余白のつき方をする。
  • 横幅の初期値が内容で決まる
  • 前後の要素とよこに並ぶ(改行が入らない)
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?