HTML Introduction | Dividing HTML Space | HTML Block and Inline

Tags:

HTML block and inline

Every HTML element has a display property that determines how that element appears in a web browser. Most HTML elements have one of the following two values as their default display property value.

  1. Elements with block properties
  2. Elements with inline properties

There is also an inline-block property, which is an intermediate stage between block and inline. No tag has inline-block as its default value. Explaining it here would make this section long, so it is not covered separately.

Elements with block properties

An element whose display property value is block always starts on a new line and takes up the full width of that line.

Representative elements whose display property value is block are as follows.

  • <div>
  • <h1>-<h6>
  • <p>
  • <ul>
  • <ol>
  • <form>

Characteristics of block properties are as follows.

  • Tags with block properties basically have a width of 100% (width: 100%). Because they completely occupy the horizontal width of the screen, there is no room for the next element to sit beside them, so a line break occurs naturally.
  • Also, unlike inline elements, when margin, width, and height properties are defined, all of them are applied. Because these properties make the appearance easy to control, most tags with block properties are used for screen composition or layout.

<div> element

The <div> element is a representative block element often used to group other HTML elements together. The <div> element is mainly used to apply styles to multiple elements at once.

<div style="background-color:lightgrey; color:green;">
    <h1>오늘의 명언</h1>
    <p>오늘 내가 죽어도 세상은 바뀌지 않는다. 하지만 내가 살아 있는 한 세상은 바뀐다.</p>
</div>

Run code

Elements with inline properties

An element whose display property value is inline is displayed together with other elements without starting a new line. Also, the width of the element takes up only as much space as the content of that HTML element, not the entire line.

Representative elements whose display property value is inline are as follows.

  • <span>
  • <a>
  • <img>
  • <strong>

Characteristics of inline properties are as follows.

  • Even if top and bottom outer margin properties, such as margin-top and margin-bottom, are defined, they are not applied. The top and bottom spacing of inline elements is caused by the line-height property, not the margin property.
  • The width (width) and height (height) properties are not applied. The width and height of inline elements are fitted to the volume of the internal elements contained by the tag.
  • When tags with inline properties are used consecutively, about 5px of outer margin is automatically added to the left and right to maintain minimal spacing.

<span> element

The <span> element is an inline element often used to group a specific part of text. The <span> element is mainly used to apply a separate style to a specific part of text.

나는 당신을 <span style="color:red">사랑</span>합니다.

Run code

Notes when writing block and inline property tags

Block is a larger concept that can contain inline. Therefore, when marking up HTML, placing a block property tag inside an inline property tag is a syntax error.

Bad example

<span><p>문장입니다.</p></span>

Good example

<p><span>문장입니다.</span></p>

If unavoidable, you can define an inline tag in CSS as span { display: block } and arbitrarily change it to the block property, but CSS should generally follow standard syntax rules. Here, remember that inline is a smaller concept than block.

References