如何在元素之間添加空間？-html教學-PHP中文網

如何在元素之間添加空間？

WBOY

發布： 2023-09-15 23:21:03

轉載

884 人瀏覽過

如何在元素之間添加空間？

在 HTML 網頁中，元素之間的空間是指不同元素周圍和之間的區域，例如文字、圖像和其他 HTML 元素。在網頁設計中加入元素之間的空間有多種方法。常見的方法是使用 CSS（層疊樣式表）在元素周圍建立邊距和填充。

使用 CSS 在 HTML 元素之間加入空格

網頁設計通常需要在元素之間添加空間，以創建視覺上令人愉悅的佈局並提高可讀性。

網頁設計有多種方法可以在元素之間添加空間。常見的方法是使用 CSS（層疊樣式表）在元素周圍建立邊距和填充。邊距是元素外部的空間，而填充是元素內部的空間。要在兩個元素之間新增空間，我們可以在其中一個元素上使用 margin 屬性。

例如，如果我們有兩個 div，我們可以使用以下 CSS 在它們之間新增空格 -

div {
   margin-bottom: 10px;
}

登入後複製

這將在每個 div 之間添加 10 像素的空間。

透過使用填充，我們也可以在元素之間添加空間。填充的工作方式與邊距類似，但它影響元素內部的空間而不是外部的空間。

例如，如果我們有一個內部有文字的 div，我們可以使用以下 CSS 在文字和 div 邊緣之間新增空格 -

div {
   padding: 20px;
}

登入後複製

這將在 div 的所有四個邊周圍添加 20 像素的填充。

範例

在此範例中，我們使用 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>

登入後複製

範例

在此範例中，我們使用 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>

登入後複製