`display: inline-block`は、要素を**インラインブロック**として表示するプロパティです。 ~~~css .element{ display: inline-block; } ~~~ ## インラインブロックの性質 - **横に並ぶ**: と同様に、同じ行に複数の要素を並べることができます。 - **幅・高さの指定が可能**: を指定した要素と同様に、とを指定できます。 - **余白の指定が可能**: を指定した要素と同様に、とを指定できます。 - **テキストの縦方向の位置揃えが可能**: 使用して、上下中央揃えなどに調整できます。 ## 例1: 横幅や高さの指定 ~~~html-preview~コード例1

要素1

~~~ `display: inline-block`を使用すると、タグのようなインライン要素に幅や高さの指定ができます。 ## 例2: 要素を横並びにする ~~~html-preview~コード例2

要素1

要素2

要素3

~~~ このコードでは、本来縦並びになるブロック要素タグを`display: inline-block`でインラインブロックに変換し、横並びにしています。 filename: コード例1 lineDecorations: - lineStart: 2 lineEnd: 2 isBorder: true rubyText: "インライン要素" - lineStart: 7 lineEnd: 9 isBorder: true rubyText: "インラインブロック変換で大きさを指定する" filename: コード例2 lineDecorations: - lineStart: 2 lineEnd: 2 isBorder: true rubyText: "複数のブロック要素" - lineStart: 3 lineEnd: 3 isBorder: true rubyText: "" - lineStart: 4 lineEnd: 4 isBorder: true rubyText: "" - lineStart: 9 lineEnd: 9 isBorder: true rubyText: "インラインブロック変換で横並びにする"

クイズにチャレンジしよう！

関連チャレンジ