😺

HTMLの代表的なブロック要素とインライン要素とそれぞれ違い

2021/01/20に公開約600字

いつも「あれ、インライン要素ってmargin効くんだっけ」とブロックレベル要素とインライン要素の違いを忘れてしまうのでまとめる。

使用頻度が高いブロックレベル要素

<address>
<article>
<aside>
<div>
<dl>
<dd>
<dt>
<figcaption>
<figure>
<footer>
<form>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<header>
<ul>
<ol>
<li>
<main>
<nav>
<p>
<section>
<table>

使用頻度が高いインライン要素

<a>
<br>
<button>
<canvas>
<i>
<iframe>
<img>
<input>
<label>
<noscript>
<picture>
<script>
<select>
<span>
<strong>
<svg>
<textarea>
<video>

ブロックレベル要素とインライン要素の違い

横幅と高さの指定

ブロックレベル要素はwidthとheightの指定ができるが、インライン要素はwidthとheightを指定しても効かない

marginの指定

インライン要素は左右のmrginは効くが、上下のmarginは効かない

paddingの指定

インライン要素は左右のpaddingは効くが、上下のpaddingは他の要素に被ってしまう

Discussion

ログインするとコメントできます