インライン要素（またはインラインレベル要素）は、HTMLにおいて文書の流れに沿って内容を表示する要素のことです。これらの要素は、ブロックレベル要素と異なり、新しい行から始まることなく、他のテキストと同じ行内で続けて表示されます。
インライン要素の特徴
- 行内表示: インライン要素は他のテキストと同じ行に表示され、内容の前後に改行を挿入しません。
- 幅と高さ: インライン要素は、その内容の幅に応じてサイズが決まります。
widthやheightプロパティを直接適用することはできません。 - マージンとパディング: 上下のマージンとパディングはインライン要素には影響しませんが、左右のマージンとパディングは適用されます。
- ネスト可能: インライン要素は他のインライン要素の内部にネストすることができますが、ブロックレベル要素を内包することはできません（ただし、HTML5では一部の例外があります）。
インライン要素の例
<a>: ハイパーリンクを作成します。<span>: 文字列に特別な意味を持たせずにグループ化するために使用されます。<img>: 画像を文書に埋め込みます。<em>: テキストを強調表示します（通常はイタリック体で表示されます）。<strong>: テキストの重要性を強調します（通常は太字で表示されます）。<b>: テキストを太字で表示しますが、<strong>とは異なり意味的な強調は伴いません。<i>: テキストをイタリック体で表示しますが、<em>とは異なり意味的な強調は伴いません。<br>: 改行を挿入します（これはセルフクロージングタグです）。<script>: JavaScriptなどのスクリプトを埋め込みます。
CSSとインライン要素
インライン要素の表示を変更するために、CSSの display プロパティを使用することができます。たとえば、インライン要素をブロックレベル要素のように扱いたい場合は、display: block; を適用することができます。逆に、ブロックレベル要素をインライン要素のように扱いたい場合は、display: inline; を適用します。
インライン要素は、主にテキストの一部にスタイルを適用したり、文中に画像やリンクを挿入したりする際に使用され、ウェブページのコンテンツの流れを維持しつつ、必要な箇所にスタイルを加える役割を果たします。