[HTML5] span tag --Create inline element

The span tag creates an inline element.

Inline element

<span> Inline element </span>

The width of the inline element is the width of the inner element

The width of the inline element is the width of the inner element.

This is Today's dinner .

This is <span style = "background: pink;"> Today's dinner </span>.

You cannot specify the width or height of an inline element. Also, you cannot specify the upper and lower margins. These two are the big differences from block elements.

When do you use the span tag?

You want to change only a part of the font size and color.

Phone number

If only Tel. Is small, the phone number is large and you want to color it.

Tel. 012-3456-7899

Tel. <span style = "color: green; font-size: 28px; letter-spacing: 3px;"> 012-3456-7899 </span>

Tag that becomes an inline element

Other than the span tag, the following tags are inline elements by default.

a tag
b tag

<ul class = "list">
  <li> <a href="/blog/20200222082049.html"> a tag</a> </li>
  <li> <a href="/blog/20200221093554.html"> b tag</a> </li>
</ul>

a tag does not work in height or width

If the height or width doesn't work for the a tag, it's because the a tag is an inline element. In that case, use "display: block;" to make it a block element.

<ul>
  <li> <a href="/" style="display:block;width:100%;background:yellow;"> button created with a tag 1</a> </li>
  <li> <a href="/" style="display:block;width:100%;background:pink;"> button made with a tag 2</a> </li>
</ul>

HTML・CSS Writing 2022