2018.05.31

10. インライン・ブロック・インラインブロック要素

目次

各要素の特徴

HTMLのタグは初期状態ではブロック要素・インライン要素のどちらかに分けられます。また、インラインブロック要素というのも存在し、これらはdisplayプロパティで切り替えることができます。

参考までに、display: none;とすると、要素を非表示にできます。

それぞれの要素の特徴は以下の通りです。(指定できるものは〇、指定しても効かないものは×としています。)

ブロック要素 インライン要素 インラインブロック要素
タグの例 div・h1~h6・ul・ol・p・table a・i・img・span・input・textarea・small CSSで指定
width・height ×
padding・margin ※ 左右のみ〇
縦並びor横並び

blockをinlineにすることはほとんどないですが、block→inline-block、inline→block、inline→inline-blockの流れはよく使います。

特にインラインブロック要素は、横並びにできて、かつwidth・heightや余白が自由に指定できるので、ボタンやリストなどを作るときに重宝します。

home

scroll