「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>
結果
インライン要素のspanタグが続いています。画面に表示すると横に並びます。