Wie füge ich Abstand zwischen Elementen hinzu?-HTML-Tutorial-php.cn

Wie füge ich Abstand zwischen Elementen hinzu?

WBOY

Freigeben： 2023-09-15 23:21:03

nach vorne

944 Leute haben es durchsucht

Wie füge ich Abstand zwischen Elementen hinzu?

In HTML-Webseiten bezieht sich der Abstand zwischen Elementen auf den Bereich um und zwischen verschiedenen Elementen, wie z. B. Text, Bildern und anderen HTML-Elementen. Es gibt viele Möglichkeiten, im Webdesign Abstand zwischen Elementen zu schaffen. Ein gängiger Ansatz besteht darin, CSS (Cascading Style Sheets) zu verwenden, um Ränder und Abstände um Elemente herum zu erstellen.

Fügen Sie mithilfe von CSS Leerzeichen zwischen HTML-Elementen hinzu

Webdesign erfordert oft das Hinzufügen von Abstand zwischen den Elementen, um ein optisch ansprechendes Layout zu schaffen und die Lesbarkeit zu verbessern.

Webdesign bietet viele Möglichkeiten, Abstand zwischen Elementen zu schaffen. Ein gängiger Ansatz besteht darin, CSS (Cascading Style Sheets) zu verwenden, um Ränder und Abstände um Elemente herum zu erstellen. Der Rand ist der Raum außerhalb des Elements, während die Polsterung der Raum innerhalb des Elements ist. Um Platz zwischen zwei Elementen hinzuzufügen, können wir die Eigenschaft „margin“ für eines der Elemente verwenden.

Wenn wir beispielsweise zwei Divs haben, können wir mithilfe des folgenden CSS-Codes Leerzeichen zwischen ihnen hinzufügen -

div {
   margin-bottom: 10px;
}

Nach dem Login kopieren

Dadurch werden zwischen jedem Div 10 Pixel Abstand hinzugefügt.

Durch die Verwendung von Polsterungen können wir auch Abstand zwischen Elementen hinzufügen. Die Auffüllung funktioniert ähnlich wie Ränder, wirkt sich jedoch eher auf den Raum innerhalb des Elements als auf den Raum außerhalb aus.

Wenn wir beispielsweise ein Div mit Text darin haben, können wir das folgende CSS verwenden, um Abstand zwischen dem Text und dem Rand des Divs hinzuzufügen -

div {
   padding: 20px;
}

Nach dem Login kopieren

Dadurch werden 20 Pixel Abstand um alle vier Seiten des Div hinzugefügt.

Beispiel

In diesem Beispiel verwenden wir die Eigenschaft „margin-top“.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
         background-color:pink;
      }
      .div1{
         margin:auto;
         background: #6ffc03;
         border: 1px solid black;
         width: 250px;
         height: 200px;
      }
      button{
         margin-top: 20px;
      }
   </style>
</head>
<body>
   <div class="div1">
      <button>Button 1</button><br>
      <button>Button 2</button>
   </div>
</body> 
</html>

Nach dem Login kopieren

Beispiel

In diesem Beispiel verwenden wir die Eigenschaft padding.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
         background-color:pink;
      }
      .div2{
         background: #6ffc03;
         border: 1px solid black;
         padding:30px;
         width: 250px;
         height: 250px;
      }
   </style> 
</head>
<body>
   <div class="div2">Padding 30</div>
</body>
</html>

Nach dem Login kopieren

Fazit

Um im Webdesign Platz zwischen Elementen zu schaffen, verwenden wir Ränder und Auffüllungen in CSS. Diese Eigenschaften können verwendet werden, um einen gleichmäßigen Abstand um ein Element herum zu erstellen und die Größe des Elements und seinen Abstand zu steuern. Die Eigenschaften „box-sizing“, „grid-gap“ und „gap“ können auch verwendet werden, um die Größe von Elementen und deren Platz zu steuern.

Das obige ist der detaillierte Inhalt vonWie füge ich Abstand zwischen Elementen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!