How can I get different margins when appending divs in CSS?

Question

I am having issues with CSS margins when appending divs. I want the margin between the Create Div button to be large, but the margin between the Example Text Here to be small.
What I am trying to accomplish
Margin too small between Create Div button and the Example Text Here, but the margin is good between the Example Text Here and the other 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: 20px;
  margin-left: 200px;
  margin-top: 20px;
  width: 950px;
  padding: 10px;
  word-spacing: 110px
}

h1 {
    margin-top: 200px;
}

Margin is good between the Create Div button and the Example Text Here, but the margin is too large between the Example Text Here and the other 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;
}

I want the margin between the Create Div button and the Example Text Here to be like this, but I don't want the margin space between the example text (when the create div button is pressed multiple times) to be that large: https://jsfiddle.net/stackquestion2021/y0dm2jao/3/
I want the Create Div and Example Text Here margin to be larger, but the Example Text Here margin with the other Example Text Here's is perfect. https://jsfiddle.net/stackquestion2021/e5nvdh4p/5/

Dejan.S · Answer

I all depends on how you gone structure the rest of your html. If this is what you gone have you can just put a margin-bottom on the button. If you change your structure to have two buttons next to each other, wrap them in a div and add the margin bottom there (I have that example as well).

Generally doing css it is in my opinion better to do margins in one direction. So you either do margin-bottom or margin-top, I do the margin-bottom as that flows better for me.

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>

s.kuznetsov · Answer

If I understood your task correctly, then you need to do it using pseudo-classes :first-of-type.
:first-of-type - identifies the first type;
And better use margin for indentation. Here it is:
margin-top: 170px;

Try this 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;  
}

Jon P · Answer

Use margin-bottom on your button to adjust the spacing to the first added task. If you need to adjust the spacing between divs, adjust 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 } Note: to get a visualisation of margins and paddings use the developer tools in the browser of your choice (generally F12). Then use the element inspector to inspect the elements to see (and play with) the styles applied.

Cooper Shaw · Answer

Some line breaks in between the 'Create Div' button and 'Example text' might work using
a few times between the 2 elements like so:

Button

Example text

Just add as many line breaks as u need, this probably isn't the most efficient way however, but its the best I can come up with.

How can I get different margins when appending divs in CSS?

4 Answers

Add your own answers!

Ask a Question