Home > Web Front-end > HTML Tutorial > How to adjust the upper and lower spacing in html

How to adjust the upper and lower spacing in html

coldplay.xixi
Release: 2023-01-03 09:29:54
Original
25388 people have browsed it

How to adjust the upper and lower spacing of html: First open vscode and add a div; then add the [line-height] attribute value to the style attribute in the div tag and modify this value to achieve the desired height.

How to adjust the upper and lower spacing in html

The operating environment of this tutorial: windows7 system, html5&&vscodev1.53.2.0 version, DELL G3 computer.

How to adjust the upper and lower spacing of html:

1. Open vscode and create an H5 standard page to demonstrate how to set the html line spacing. If there is no vscode, using a text file will have the same effect, except that the file name needs to end with .html

How to adjust the upper and lower spacing in html

2. Add a div to the page and set the width to 300. The purpose is to wrap the text in the div and set the line height

How to adjust the upper and lower spacing in html

3. Open the page in the browser and you can see the default text spacing, as shown in the figure

How to adjust the upper and lower spacing in html

4. If you want to increase the line spacing, you can add the line-height attribute value to the style attribute in the div tag

How to adjust the upper and lower spacing in html

5. Open the page in the browser, and you can see that the text spacing has become larger

How to adjust the upper and lower spacing in html

6. Press F12 in the browser , enter the developer mode, you can see the line-height value of the line spacing. At this time, you can modify this value to achieve the desired height

How to adjust the upper and lower spacing in html

Related learning Recommended: html video tutorial

The above is the detailed content of How to adjust the upper and lower spacing in html. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template