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