「CSS」ブロックレベルのインライン要素のサンプル
環境
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>
<!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>
<!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タグが続いています。画面に表示すると横に並びます。