So fügen Sie Leerzeichen in CSS hinzu

So fügen Sie Leerzeichen mit CSS hinzu

In CSS gibt es viele Möglichkeiten, Leerzeichen hinzuzufügen. Die am häufigsten verwendeten Methoden sind wie folgt:

1. Verwenden Sie Rand- und Auffüllattribute

• margin wird verwendet, um Leerzeichen außerhalb des Elements hinzuzufügen, während padding wird verwendet, um Leerzeichen außerhalb des Elements hinzuzufügen. Die folgenden Werte für diese beiden Attribute können verwendet werden: margin 用于在元素外部添加空格，而 padding 用于在元素内部添加空格。可以使用这两种属性的以下值：

  • 像素 (px)：指定空格的像素大小，如 margin: 10px;
  • 百分比 (%)：指定空格相对于父元素尺寸的百分比，如 margin: 10%;
  • em：指定空格相对于元素字体大小的倍数，如 margin: 1em;

2. 使用 display: flex 或 display: grid

• display: flex 和 display: grid 属性可让您灵活地布局元素，包括添加空格。通过设置 justify-content 和 align-items 等属性，您可以控制元素在其容器内的排列方式，从而创建空格。

3. 使用 white-space 属性

• white-space 属性控制换行符、制表符和空格在元素中的处理方式。通过设置 white-space: pre，您可以保留HTML 中的空格和换行符，从而在元素内创建空格。

4. 使用非破坏性空格 (nbsp;)

Pixel (px) : Geben Sie die Pixelgröße des Raums an, z. B. margin: 10px

Prozent (% )

: Geben Sie die relative Größe des Leerzeichens an. Prozentsatz der Größe des übergeordneten Elements, z. B. margin: 10%;🎜🎜🎜em🎜: Geben Sie das Vielfache des Leerzeichens relativ zur Schriftgröße an des Elements, wie zum Beispiel margin: 1em;🎜🎜 🎜🎜🎜🎜2. Verwenden Sie display: flex oder display: grid🎜🎜🎜🎜display: flex und display: Grid-Attributen können Sie Elemente flexibel anordnen, einschließlich des Hinzufügens von Leerzeichen. Durch das Festlegen von Eigenschaften wie justify-content und align-items können Sie steuern, wie Elemente in ihrem Container angeordnet werden, wodurch Leerraum entsteht. 🎜🎜🎜🎜3. Verwenden Sie das Leerzeichen-Attribut 🎜🎜🎜🎜white-space-Attribut steuert, wie Zeilenumbrüche, Tabulatoren und Leerzeichen in einem Element behandelt werden. Durch die Einstellung von white-space: pre können Sie Leerzeichen und Zeilenumbrüche in HTML beibehalten und so Leerzeichen innerhalb des Elements erzeugen. 🎜🎜🎜🎜4. Geschütztes Leerzeichen verwenden (nbsp;)🎜🎜🎜🎜  ist eine HTML-Entität, die zum Einfügen eines geschützten Leerzeichens verwendet wird. Es wird keine Zeile auf der Seite umbrochen, aber es wird ein Leerzeichen erstellt. 🎜🎜🎜🎜Beispiel: 🎜🎜🎜Das folgende Beispiel zeigt, wie Leerzeichen mithilfe von CSS hinzugefügt werden: 🎜

<code class="css">/* 使用 margin 和 padding 添加空格 */
.element {
  margin: 10px;
  padding: 10px;
}

/* 使用 display: flex 添加空格 */
.container {
  display: flex;
  justify-content: space-between;
}

/* 使用 white-space 属性保留空格 */
pre {
  white-space: pre;
}

/* 使用   插入非破坏性空格 */
.name {
   John Doe
}</code>

Das obige ist der detaillierte Inhalt vonSo fügen Sie Leerzeichen in CSS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!