重复引用类导致文本边距偏移

Question

在起草网站时，我尝试连续使用相同的 class 4 次不同的时间，但发现它改变了文本的显示方式。

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Cgynus - Documentation</title>
  <script src="script.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>
    <div class="topheader">Documentation</div>
  </h1>
  <p>
    <div class="regulartext">Welcome to the official Cygnus programming language documentation.</div>
    <div class="regulartext">This documentation reference manual describes the standard library that is distributed with Cygnus. It also describes some of the optional components that are commonly included in Cygnus distributions.
    <div class="regulartext">Cygnus hosts a standard library that is very extensive and offers a wide range of facilities as indicated by the long table of contents listed below. The library contains built-in modules that provide access to system functionality that would otherwise be inaccessible to Cygnus programmers, as well as modules written in Cygnus that provide standardized solutions for many problems that occur in everyday programming.
    <div class="regulartext">In addition to the standard library, there is a growing collection of several thousand components (from individual programs and modules to packages and entire application development frameworks), available from the Cygnus homepage.</div>
  </p>
</body>

</html>

CSS:

.topheader {
  margin-left: 50px;
}

.regulartext {
  margin-left: 50px;
}

为什么会这样？如何让文本定期对齐？

Answer 1

您忘记关闭两个 div 标签，导致边距问题。

固定代码如下：

.topheader {
  margin-left: 50px;
}

.regulartext {
  margin-left: 50px;
}

 
    <div class="topheader"> <h1>Documentation</h1></div>
  
  <p>
    <div class="regulartext">Welcome to the official Cygnus programming language documentation.</div>
    <div class="regulartext">This documentation reference manual describes the standard library that is distributed with Cygnus. It also describes some of the optional components that are commonly included in Cygnus distributions.</div>
    <div class="regulartext">Cygnus hosts a standard library that is very extensive and offers a wide range of facilities as indicated by the long table of contents listed below. The library contains built-in modules that provide access to system functionality that would otherwise be inaccessible to Cygnus programmers, as well as modules written in Cygnus that provide standardized solutions for many problems that occur in everyday programming.</div>
    <div class="regulartext">In addition to the standard library, there is a growing collection of several thousand components (from individual programs and modules to packages and entire application development frameworks), available from the Cygnus homepage.</div>

希望对您有所帮助！

重复引用 类 导致文本边距偏移

Repeated reference of classes causing text margins to shift

html

css

margin

重复引用类导致文本边距偏移