CSS inline-blockで横に並べるサンプル

2022年12月28日

環境
Windows 10 Home 64bit
Google Chrome　107.0.5304.122（Official Build）（64 ビット）

構文
display: inline-block;
インラインブロック要素は、ブロックレベル要素とインライン要素の中間の要素です。
横に要素が並びます
幅と高さが指定できます
余白を自由に調整できます
要素の配置を指定できます
inline-blockは、inlineのように横に並べて表示し、かつwidthとheightの指定が効きます。
使用例

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  display: inline-block;
  background-color: skyblue;
}
</style>
</head>
<body>

<h2>study skill</h2>
<h2>from arkgame</h2>
</body>
</html>

結果
h2タグの内容がインラインブロック要素になります、上下にもmarginがつくようになります。

CSS

Posted by arkgame

関連記事: