この記事では、inline-block 要素のプロパティについて説明します。これは CSS の非常に便利なプロパティです。さまざまなタグに適用できます。これは CSS 表示プロパティの一部です。
配列リスト
使用法：
display: inline-block
上記のプロパティを適用すると、要素はその子要素に対してインラインおよびブロックとして動作します。インライン要素とブロック要素について理解しましょう。
インライン要素
新しい行で始まらない要素は、インライン要素と呼ばれます。これらは個別のアクションではなく、メインテキストの一部として結合されます。これらの要素は必要なスペースのみを占めます。インライン要素には左右のスペースを追加できますが、インライン要素の上部または下部のパディングまたはマージンに高さを追加することはできません。
インライン要素の例:
例：
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag 出力：
CSSでテキストに下線を付ける
ブロック要素
新しい行で始まる要素はブロック要素と呼ばれます。ブロック要素は、そのコンテンツに使用できる全幅を取得します。インラインとは異なり、これらの要素には上下のマージンが存在します。ブロックレベルの要素は、body タグ内にのみ出現できます。ブロックレベルの要素は、インライン要素よりも大きな構造を作成します。
ブロック要素の例:
、
Googleは何の略ですか
例：
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> 出力：
から助ける
インラインブロック要素
inline-block の表示値は、要素の高さと幅が変更可能になるという 1 つの例外を除いて、inline と同様に機能します。
例：
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> 出力：
以下は、1 ページ上のすべての要素を使用した出力ファイルです。
コード
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>