1

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/

2
  • What is the p1 tag in your jsfiddles?
    – Jon P
    Jan 19, 2021 at 5:14
  • Edited to button, thanks Jan 19, 2021 at 5:26

4 Answers 4

0

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>

0

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
}
<button id="createDiv">Create Div</button>

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.

0

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;  
}
-2

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

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

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.

1
  • 1
    No No No No No!!!! Do not use multiple br tags for spacing. Use margin or padding (and know the difference between them) instead.
    – Jon P
    Jan 19, 2021 at 5:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.