如何在 HTML/CSS 中不使用 br 标签换行?
简介
在 HTML/CSS 中，不使用 <br> 标签换行在您想要在元素之间创建空格但不想添加新行文本的情况下非常有用。使用 CSS 实现此效果有几种不同的方法，我们将在本文中进行探讨。在 HTML5 和 CSS 之前，程序员经常使用 <br> 标签。然而，现在我们有了更好的技术，事实上，<br> 的使用已经过时了。
在本文中，我们将学习如何在 HTML 和 CSS 中不使用 <br> 标签换行。
使用 CSS 的 Content 属性
在 CSS 中创建换行符的一种方法是将 content 属性与 ::before 或 ::after 伪元素结合使用。这是一个例子 -
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.break::before {
content: "";
display: block;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="first">This is the first text</div>
<div class="break">This is some text.</div>
<div class="third">This is the third text</div>
</body>
</html>
说明
提供的 HTML/CSS 代码创建了一个包含三个 <div> 元素的基本 HTML 文档，每个元素包含不同的文本内容。CSS 代码使用 .break 类定位到第二个 <div> 元素，并使用 ::before 伪元素在其上方添加换行符。该伪元素的 content 属性为空字符串，display 属性设置为 block，margin-top 值为 20px 以创建空间。这会导致第一个和第三个 <div> 元素位于一行，而第二个 <div> 元素位于新行，并在其上方留有空间。
使用 CSS Margin 属性
创建换行符的另一种方法是使用 margin 属性在元素周围添加空间。我们可以使用以下属性 -
margin-top:顶部边距
margin-right:右侧边距
margin-bottom:底部边距
margin-left:左侧边距
如果我们只提及边距，则元素将在四个方向上采用均匀边距。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.break {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="first">This is the first text</div>
<div class="break">This is some text.</div>
<div class="third">This is the third text</div>
</body>
</html>
说明
此 HTML/CSS 代码创建了一个包含三个 <div> 元素的基本 HTML 文档，每个元素包含不同的文本内容。CSS 代码使用 .break 类定位到第二个 <div> 元素，并添加 20px 的 margin-top 值以在其上方创建空间。
这会导致第一个和第三个 <div> 元素位于同一行，而第二个 <div> 元素另起一行，并在其上方留有空间。此方法不像上例那样使用::before 伪元素，而只是为目标 <div> 元素添加外边距。
使用 CSS Padding 属性
与 margin 属性类似，您也可以使用 padding 属性在元素周围添加空间。与边距属性类似，我们可以为其定义四个属性。
padding-top:沿顶部填充
padding-right:从右侧填充
padding-bottom:从底部填充
padding-left:从左侧填充
如果我们仅提及填充，则默认情况下它将假定所有方向的间距均匀。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.break {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="first">Hello world</div>
<div class="break">Hello world</div>
<div class="third">Hello world</div>
</body>
</html>
在此示例中，我们为 <div> 元素添加了 padding-top 值，并将其类设置为 break。这会在元素上方创建空间，从而有效地打破行距。
使用 CSS Line-height 属性
另一种在元素之间创建空间而不添加新行文本的方法是调整 line-height 属性。以下是示例 -
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.break {
line-height: 5;
}
</style>
</head>
<body>
<div class="first">Hello world</div>
<div class="break">Hello world</div>
<div class="third">Hello world</div>
</body>
</html>
在此示例中，我们为 <p> 元素添加了 line-height 值 2，并将其类名为 break。这会使行高加倍，从而在文本行之间创建空间。
结论
在 HTML/CSS 中，不使用 <br> 标签来换行是一种在元素之间创建空间的有效技巧。使用 CSS 有多种方法可以实现此效果，包括使用 content、margin、padding 和 line-height 属性。通过尝试这些技巧，您可以创建具有清晰、精确间距的布局，并避免不必要的换行符使 HTML 内容变得杂乱。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
