<h2>インライン要素</h2>
<span class="inline1">ダミーテキスト</span>
<span class="inline2">ダミーテキスト</span>
<span class="inline3">ダミーテキスト</span>

<div style="width:100%;height:3px;background:#555;margin:50px 0"></div>

<h2>インラインブロック要素</h2>
<span class="inline-block1">ダミーテキスト</span>
<span class="inline-block2">ダミーテキスト</span>
<span class="inline-block3">ダミーテキスト</span>
* {
  margin: 0;   /* 初期化 */
  padding: 0;  /* 初期化 */
}

.inline1 {
  background-color: red;
}
.inline2 {
  background-color: gray;
}
.inline3 {
  background-color: blue;
}

.inline-block1 {
  background-color: red;
  display: inline-block;
}
.inline-block2 {
  background-color: gray;
  display: inline-block;
}
.inline-block3 {
  background-color: blue;
  display: inline-block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.