在 CSS 中附加 div 時如何獲得不同的邊距？

Question

附加 div 時，我遇到了 CSS 邊距問題。 我希望 Create Div 按鈕之間的邊距很大，但 Example Text Here 之間的邊距很小。

我想要完成的事情

創建 Div 按鈕和此處的示例文本之間的邊距太小，但此處的示例文本和此處的其他示例文本之間的邊距很好。

JS：

document.getElementById("createTask").addEventListener("click", myFunction);

      function myFunction() {    
        
        var div = document.createElement('div');
        div.innerHTML = "Example Text Here Example Text Here";
        div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
        document.body.appendChild(div);
}

CSS：

div {
  border-top: 20px;
  margin-left: 200px;
  margin-top: 20px;
  width: 950px;
  padding: 10px;
  word-spacing: 110px
}

h1 {
    margin-top: 200px;
}

Create Div 按鈕和 Example Text Here 之間的邊距很好，但是 Example Text Here 和其他 Example Text Here 之間的邊距太大

JS：

    document.getElementById("createTask").addEventListener("click", myFunction);

  function myFunction() {    
    
    var div = document.createElement('div');
    div.innerHTML = "Example Text Here Example Text Here";
    div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
    document.body.appendChild(div);
}

CSS：

div {
  border-top: 170px solid transparent;
  margin-left: 200px;
  margin-top: 20px;
  width: 950px;
  padding: 10px;
  word-spacing: 110px
}

h1 {
    margin-top: 200px;
}

我希望 Create Div 按鈕和 Example Text Here 之間的邊距是這樣的，但我不希望示例文本之間的邊距空間（當多次按下 create div 按鈕時）那么大： https： //jsfiddle.net/stackquestion2021/y0dm2jao/3/

我希望 Create Div 和 Example Text Here 邊距更大，但是 Example Text Here 邊距與其他 Example Text Here's 是完美的。 https://jsfiddle.net/stackquestion2021/e5nvdh4p/5/

Answer 1

使用按鈕上的margin-bottom來調整第一個添加任務的間距。 如果需要調整 div 之間的間距，調整padding

 document.getElementById("createDiv").addEventListener("click", myFunction); function myFunction() { var div = document.createElement('div'); div.innerHTML = "Example Text Here Example Text Here"; div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css document.body.appendChild(div); }

 #createDiv { border: 3px; border-style: solid; border-color: #1E5096; padding: 1em; background-color: #FFF; margin-bottom: 20px; /*Space to first task Adjust as needed*/ } div.myclass { /*border-top: 20px; //MAkes no sense - you have no boarder */ margin-left: 200px; width: 950px; padding: 10px; /*If you need to adjust space beteen tasks change top and bottom margin*/ word-spacing: 110px }

 <button id="createDiv">Create Div</button>

注意：要獲得邊距和填充的可視化，請使用您選擇的瀏覽器中的開發人員工具（通常是 F12）。 然后使用元素檢查器檢查元素以查看（並使用）應用的 styles。

Answer 2

如果我正確理解了您的任務，那么您需要使用偽類:first-of-type來完成。

:first-of-type - 標識第一個類型；

並更好地使用縮進margin 。 這里是：

margin-top: 170px; 

試試這個 css：

div.myclass {
  border-top: 20px solid transparent;
  margin-left: 200px;
  width: 950px;
  padding: 10px;
  word-spacing: 110px
}

div.myclass:first-of-type {
  margin-top: 170px;  
}

Answer 3

我完全取決於您如何構建 html 的 rest。 如果這是你所擁有的，你可以在按鈕上放一個margin-bottom 。 如果您將結構更改為彼此相鄰的兩個按鈕，請將它們包裝在一個 div 中並在底部添加邊距（我也有那個示例）。

通常做 css 在我看來，最好在一個方向上做邊距。 所以你要么做margin-bottom要么margin-top ，我做margin-bottom因為這對我來說更好。

 document.getElementById("createDiv").addEventListener("click", myFunction); function myFunction() { var div = document.createElement('div'); div.innerHTML = "Example Text Here Example Text Here"; div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css document.body.appendChild(div); }

 div { margin-left: 200px; margin-top: 20px; width: 950px; padding: 10px; word-spacing: 110px } h1 { margin-top: 200px; }.button { border: 3px; border-style: solid; border-color: #1E5096; padding: 1em; margin-bottom: 170px; }

 <button id="createDiv" class="button">Create Div</button>

 document.getElementById("createDiv").addEventListener("click", myFunction); function myFunction() { var div = document.createElement('div'); div.innerHTML = "Example Text Here Example Text Here"; div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css document.body.appendChild(div); }

 div { margin-left: 200px; margin-top: 20px; width: 950px; padding: 10px; word-spacing: 110px } h1 { margin-top: 200px; }.action-wrapper { display: flex; align-items: center; margin-bottom: 170px; }.button { border: 3px; border-style: solid; border-color: #1E5096; padding: 1em; }

 <div class="action-wrapper"> <button id="createDiv" class="button">Create Div</button> <button class="button">Placeholder</button> </div>

Answer 4

'Create Div' 按鈕和'Example text' 之間的一些換行可能會在兩個元素之間使用</br>幾次，如下所示：

<div>Button</div> </br></br> <div>Example text</div>

只需根據需要添加盡可能多的換行符，這可能不是最有效的方法，但它是我能想到的最好的方法。