html_html/css_WEB-ITnose のブロックレベル要素、インライン要素、およびインラインブロックレベル要素の基本

Concept

ブロックレベル: block

インライン: inline

インラインブロックレベル: inline-block

HTML要素では、要素は表示属性を持ちます

デフォルト値は表示属性が block の場合、要素はブロック レベルの要素になります。

display 属性のデフォルト値が inline である場合、要素はインライン要素になります。

要素なしの表示のデフォルト値は inline-block です。

display 属性値を設定できます。たとえば、ブロックレベル要素 div の表示値を inline に設定すると、それは inline 要素になり、単独では表示されなくなります。

機能

1. ブロックレベルの要素

は 1 行を占めます。

幅、高さ、マージン、パディングを設定できます。

内部にブロックレベルまたはインライン要素を含めることができます。

2. インライン要素

は他のインライン要素と並んで表示されます。

width、height、margin-top、margin-bottom、padding-top、padding-bottom の設定は無効です。 margin-left、margin-righ、padding-left、padding-right を設定できます。

ブロック レベル要素またはインライン要素を含めることができます。ブロック レベル要素が含まれる場合、ブロック レベル要素は引き続き独自の行に表示され、次のインライン要素は新しい行に表示されます。

3.inline-block

他のインライン要素と一緒に表示します。

ブロックレベルの要素と同様に、幅、高さ、マージン、パディングを設定できます。

ブロックレベル要素またはインライン要素を含めることができます。ブロックレベル要素が含まれる場合、ブロックレベル要素はインライン要素内に単独で表示され、次のインライン要素の表示には影響しません。

よく使われるブロックレベルの要素

div、form、p、table、h1~h6、hr、dl、ol、ul、pre など

よく使われるインライン要素

a、img、input、span、br、select、strong、em、textarea、label など。