Spacing and Breaks

HTML5 provides several ways to control spacing and create line breaks within a document.

<br> element: The <br> element is used to create a single line break. It is a self-closing tag and doesn’t require a closing tag. For example:

<p>This is the first line.<br>This is the second line.</p>

<hr> element: The <hr> element is used to create a horizontal rule, which is typically used to visually separate content within a page. It is also a self-closing tag. For example:

<p>This is the first paragraph.</p>

<hr>

<p>This is the second paragraph.</p>

padding and margin CSS properties: The padding property controls the space between an element’s content and its border, while the margin property controls the space between an element’s border and the adjacent elements. For example:

<style>

p {

padding: 10px;

margin: 20px;

}

</style>

<p>This paragraph has 10px of padding and 20px of margin on all sides.</p>

line-height CSS property: The line-height property controls the height of each line of text within an element. It is typically set as a multiple of the font size. For example:

<style>

p {

font-size: 16px;

line-height: 1.5;

}

</style>

<p>This paragraph has a font size of 16px and a line height of 1.5, which means each line is 24px tall.</p>

By using these tools, you can control spacing and create line breaks to improve the readability and organization of your HTML5 documents.

Spacing is needed between tags and attributes and more rules need to be followed in applying spacing which is illustrated by the image

Spacing and Breaks