时间戳

首页 > 解决方案 > 在 CSS 中附加 div 时如何获得不同的边距？

javascript - 在 CSS 中附加 div 时如何获得不同的边距？

问题描述

附加 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/

标签： javascripthtmlcss

解决方案

如果我正确理解了您的任务，那么您需要使用伪类来完成它: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;  
}

推荐阅读