# ブロックレベル要素とインライン要素

HTMLde定義されている要素のうち、`<body>` ~ `</body>`の中でしようされる要素の多くは、ブロックレベル要素 (Block-Level Elements)もしくはインライン要素 (Inline Elements) に分類される。



## ブロックレベル要素 (Block-Level Elements)
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識される。 ブラウザでの表示も一つのかたまりとして扱われることが多く、**一般的なブラウザでは前後に改行が入る**
- 改行と並び
    - ブロック要素の前後には改行が入る
- 幅・高さの指定
    - 幅と高さが指定できる
- 余白の指定
    - 上下左右のmarhginとpaddingを自由に指定できる


**【代表的なブロックレベル要素】**
```
<div>, <h1> ~ <h6>, <p>, <ul>, <ol>, <li>, <table>, <form>, <hr>, <pre>, <blockquote>
```

## インライン要素 (Inline Elements)

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。 例えば、`<p>`要素の中の`<strong>`要素のように、段落のなかの一部を強調するような使われ方をする要素。 **一般的なブラウザでは前後に改行が入らず、文章の一部として表示される。**  
    
**【代表的なインライン要素】**
```
<a>, <span>, <b>, <img>, <label>, <input>, <select>, <textarea>
```
- 改行と並び
    - 横に並ぶ
- 幅・高さの指定
    - 幅と高さは指定できない(文字の長さや大きさで決まる)
- 余白の指定
    - 左右のpaddingとmarginは指定できる
    - 上下のmarginは指定できない
    - 上下のpaddingを指定すると、前後の行と被ってしまう

【参考文献】
[【CSS】displayの使い方を総まとめ！inlineやblockの違いは？](https://saruwakakun.com/html-css/basic/display#section1)

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/用語集/ブロックレベル要素とインライン要素
- Permalink: https://tips.weseek.co.jp/5e8d2a6331511b0048ecf60f
- Parent: [用語集](/5e392c4be848c600487d69c9.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 30 total
  - [Bootstrap](/5e3936ebe848c600487d69f6.md)
  - [BuildKit](/5e67ad3278bd2f0048680aee.md)
  - [CSS](/5e392f36e848c600487d69e0.md)
  - [Express](/5e392db0e848c600487d69d3.md)
  - [HTML](/5e392f85e848c600487d69e3.md)
  - [HTTP レスポンスステータスコード](/5e520e333a1f5c0048d0ac90.md)
  - [Javascript](/5e392e88e848c600487d69db.md)
  - [Node.js](/5e392d51e848c600487d69cc.md)
  - [ORM](/5e42a75e5b5a0900495044bb.md)
  - [OSS](/5e397a29e848c600487d6a18.md)
  - [Object-Relational Mapping](/5e57c52d7887d10048094a0b.md)
  - [Python](/5e48bfd61ec5e4004811d4f1.md)
  - [React](/5f163c2e647aac00495efa80.md)
  - [SVG](/5e393124e848c600487d69f3.md)
  - [Sass](/5e9535980804c600481af4b6.md)
  - [Svelte](/5e392e14e848c600487d69d8.md)
  - [hogeとは](/5e9e44663edc660048f48b40.md)
  - [インフラ関係](/5e86afaa1390990048058193.md)
  - [オープンリダイレクト](/5e5d34c83051ce00499cac56.md)
  - [キャレット(caret)とは](/5e967fc94d0611004855c161.md)
  - [デグレとは](/5e97bb3a76311900487c3c4e.md)
  - [ネストとは](/5e8c00a7ccdfb10048db43aa.md)
  - [ハッシュ関数](/5e5a19d81b844e0048d0c18f.md)
  - [バリデーション](/5e50e7fc839fe7004832158b.md)
  - [マイグレーション](/5e96e93f76311900487c3c47.md)
  - [レンダリングとは](/5e8fdb1dda4e5b0048ad0ec0.md)
  - [変数名の命令規則](/5e869f7b1390990048058190.md)
  - [認証関係](/5e4dffec340a4f0049473d34.md)
  - [＆nbsp; とは](/5ea63ed8d87f08004864af52.md)
  - [＜br＞と＜br  ](/65069da24603e7ff39a6b3d3.md)
- Last updated: 2020-04-08T01:35:31.793Z by deleted_at_1715747466121
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e8d2a6331511b0048ecf60f
