CSS inline-blockで横に並べるサンプル
環境
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>
<!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>
<!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がつくようになります。