如何減少差距原因<br>

我怎樣才能減少<br>這個CSS上的“間隙”或“空間”，因為它太多了......而且它在PC上的實際網路瀏覽器上真的很明顯，所以這里有一個現場演示 謝謝你..

.alert {
  margin: auto;
  width: 50%;
  padding: 3px 10px 3px 40px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: Tomato;

  font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet, sans-serif;
  font-size: 16px;
  color: black;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  text-align: left;
  line-height: 1.5;
  display: block;
}

<div class="alert">You must read and agree to the Terms and Conditions agreement. </div><br>
<div class="alert">That email is already connected to an account!</div>

uj5u.com熱心網友回復：

您不應該為此使用換行符。只需在 .alert 類中添加一個底部邊距并洗掉換行符。

<div class="alert">You must read and agree to the Terms and Conditions agreement. </div>
<div class="alert">That email is already connected to an account!</div>

.alert {
  margin: 0 auto 5px auto;
  width: 50%;
  padding: 3px 10px 3px 40px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: Tomato;

  font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet, sans-serif;
  font-size: 16px;
  color: black;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  text-align: left;
  line-height: 1.5;
  display: block;
}

https://jsfiddle.net/74qaxr2z/

uj5u.com熱心網友回復：

您可以<br>從 html 中洗掉標簽，而是將兩個警報放在父級中div并為其添加邊距。

.alertparent{
  margin:5px;
}
.alert {
  margin: auto;
  width: 50%;
  padding: 3px 10px 3px 40px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: Tomato;

  font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet, sans-serif;
  font-size: 16px;
  color: black;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  text-align: left;
  line-height: 1.5;
  display: block;
}

<div class="alertparent">
  <div class="alert">You must read and agree to the Terms and Conditions agreement. </div>
</div>
<div class="alertparent">
    <div class="alert">That email is already connected to an account!</div>
</div>

uj5u.com熱心網友回復：

你不需要<br>標簽。您可以為 DIV 分配一個邊距底部。

.alert {
  margin: auto;
  width: 50%;
  padding: 3px 10px 3px 40px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: Tomato;

  font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet, sans-serif;
  font-size: 16px;
  color: black;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  text-align: left;
  line-height: 1.5;
  display: block;
  margin-bottom: 5px;
}

<div class="alert">You must read and agree to the Terms and Conditions agreement. </div>
<div class="alert">That email is already connected to an account!</div>

uj5u.com熱心網友回復：

洗掉br標簽，并margin-bottom改用。請參閱以下示例。

HTML

<div>content</div>
<div>content</div>

CSS

div {
  margin-bottom: 15px;
}

另一種方法是使用 CSS 網格。這樣，您不需要使用額外的 CSS 洗掉最后一個 div 的邊距（如果需要）。

HTML

<div class='container'>
  <div>Your contents</div>
  <div>Your contents</div>
</div>

CSS

.container {
  display: grid;
  gap: 15px;
}

uj5u.com熱心網友回復：

div 已經是塊級元素，這意味著默認情況下它占據瀏覽器的整個寬度。因此，每當添加 div 時，它都會自動落入新行。如果您想在它們之間顯式添加空格，請嘗試使用此

.alert {
  margin: auto;
  width: 50%;
  padding: 3px 10px 3px 40px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: Tomato;

  font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet, sans-serif;
  font-size: 16px;
  color: black;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  text-align: left;
  line-height: 1.5;
  display: block;
}

.alert:first-child{
    margin-bottom: 5px;
}

<div class="alert">You must read and agree to the Terms and Conditions agreement. </div>
<div class="alert">That email is already connected to an account!</div>

標籤：

上一篇：如何通過php將輸入的html資料匯出為txt（問題）

下一篇：JavaScript中的值是遞增而不是遞減？