上から下に順番に並ぶ
<h1>H1</h1> <div>DIV</div> <h1>H2</h1> <div>DIV</div>
H1
DIV
H2
DIV
文字と一緒に左右に並ぶ
文字 <a href="https://line.me/">A</a> 文字 <button>BUTTON</button> 文字 <img src="https://plchldr.co/i/50x50"> 文字
文字
A
文字
BUTTON
文字
文字
block要素とinline要素は同一階層で混在させない
<style> div{ margin: 10px; border: 1px solid black; } </style> <div><!-- ここはblock要素を並べた --> <div><!-- ここはblock要素を並べた --> <div>DIV</div> <div>DIV</div> <div>DIV</div> </div> <div><!-- ここはinline要素を並べた --> 文字 <button>BUTTON</button> 文字 </div> <div>DIV</div> </div>
DIV
DIV
DIV
文字
BUTTON
文字
DIV
文字