「CSS」ブロックレベルのインライン要素のサンプル

2022年7月4日

環境
Google Chrome　103.0.5060.66（Official Build）

構文
主なインライン要素　span,a,img,input
インライン要素を続けて記述した場合、画面上は横に並びます。
marginは、左右のみ効きます。
widthとheightで幅と高さを指定できません。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cft span {
    height: 50px;
    margin: 20px 20px 20px 20px;
  }
  .cft {
    background-color: skyblue;
  }
</style>
</head>
<body>

<div class="cft">
  <span>111</span>
  <span>222</span>
  <span>333</span>
</div>

</body>
</html>

結果
インライン要素のspanタグが続いています。画面に表示すると横に並びます。

CSS

Posted by arkgame

関連記事: