htmlで定義されている要素で<body>～</body>の内容が画面に表示されることは分かったと思います。
この<body>～</body>のなかで使用されるタグの要素を分類すると2つの要素に分類できます。
今回はこの2つの要素を覚えていきましょう。
ブロックレベル要素とインライン要素
ブロックレベル要素
ブロックレベル要素は一つのブロックのかたまりを指します。
ブラウザで見ると前後に改行が入るものがこのブロックレベル要素になります。
たとえば見出し、段落、表などがこれに当たります。
<address>、<article>、<aside>、<blockquote>、<details>、<dialog>、<dd>、<div>、<dl>、<dt>、<fieldset>、<figcaption>、<figure>、<footer>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<header>、<hgroup>、<hr>、<li>、<main>、<nav>、<ol>、<p>、<pre>、<section>、<table>、<ul>インライン要素
インライン要素とはブロック要素の逆で文章などの一部として扱われ、ブラウザで見ると前後に改行が入らないものがこのインライン要素になります。
<a>、<abbr>、<acronym>、<audio>、<b>、<bdi>、<bdo>、<big>、<br>、<button>、<canvas>、<cite>、<code>、<data>、<datalist>、<del>、<dfn>、<em>、<embed>、<i>、<iframe>、<img>、<input>、<ins>、<kbd>、<label>、<map>、<mark>、<meter>、<noscript>、<object>、<output>、<picture>、<progress>、<q>、<ruby>、<s>、<samp>、<script>、<select>、<slot>、<small>、<span>、<strong>、<sub>、<sup>、<svg>、<template>、<textarea>、<time>、<u>、<tt>、<var>、<video>、<wbr>ブロックレベル要素とインライン要素の違いを知る
ブロックレベル要素にできてインライン要素にはできないがあるため2つの要素の特徴を理解していないと思ったとおりのコーディングができないことがあります。
インライン要素に幅と高さを指定できない
ブロックレベル要素には幅と高さを指定することができますがインライン要素には幅と高さを指定しても反映されません。
要素の並び
ブロックレベル要素は他の要素と縦に並ぶの対してインライン要素は横に並ぶようになっています。
上下の余白のつき方が違う
インライン要素には、上下にmarginをつけてもかからないです。
を付けられません。
コメント