How to bottom margin with jQuery or JavaScript

Question

How do I add bottom margin for my selection box?

I've already tried

#Selection { margin-bottom:23px; }

But this does not work for me. Is there a way to do this with JavaScript or jQuery.

JsFiddle

Snippet Below :-

var startX = 0,
  startY = 0,
  started = false;

$(document).mousedown(function(e) {
  e.preventDefault();

  startX = e.pageX;
  startY = e.pageY;
  started = true;
  $('#selection').css({
    'top': startY,
    'left': startX
  });
});

$(document).mousemove(function(e) {
  if (started) {

    $('#selection').css({
      'left': startX > e.pageX ? e.pageX : startX,
      'top': startY > e.pageY ? e.pageY : startY
    });

    $('#selection').css({
      'height': Math.abs(e.pageY - startY),
      'width': Math.abs(e.pageX - startX)
    });
  }
});

$(document).mouseup(function() {
  $('#selection').css({
    'top': 0,
    'left': 0,
    'height': 0,
    'width': 0
  });
  started = false;
  startX = 0;
  startY = 0;
});

$(document).on('contextmenu', function() {
  return false;
});

body {
  background:url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg) no-repeat bottom center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin:0;
}
#container {
  position: absolute;
  width:100%;
  height:90%;
  top:0px;
}
#selection {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-box-shadow:inset 0px 0px 0px 2px #f00;
  -moz-box-shadow:inset 0px 0px 0px 2px #f00;
  -ms-box-shadow:inset 0px 0px 0px 2px #f00;
  -o-box-shadow:inset 0px 0px 0px 2px #f00;
  box-shadow:inset 0px 0px 0px 2px #f00;
}
#bottom {
  position:fixed;
  background-color: rgba(255, 0, 0, 0.5);
  width:100%;
  height:10%;
  text-align:center;
  bottom:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="selection"></div>
</div>

<div id="bottom">
  <font size="+3" color="lime">don't want selection box here!</font>
</div>

Answer 1

#selection is not giving you a margin-bottom because it is absolutely positioned, also there is no other elements underneath it for it to have a margin bottom.

Use this to illustrate with demo on bottom:

<div id="container">
   <div id="selection">Hello</div>
   <div id="selection">Hello</div>
   <div id="selection">Hello</div>
</div>

CSS:

#selection {
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-box-shadow:inset 0px 0px 0px 2px #f00;
  -moz-box-shadow:inset 0px 0px 0px 2px #f00;
  -ms-box-shadow:inset 0px 0px 0px 2px #f00;
  -o-box-shadow:inset 0px 0px 0px 2px #f00;
  box-shadow:inset 0px 0px 0px 2px #f00;
  margin-bottom: 20px;
}

Applying Margins with JQuery & Vanilla JS

If you want to apply a margin-bottom with jQuery you can add this to your script file, note that I changed its identifier from a ID to class to target multiples.

$(".selection").css("margin-bottom", "25px");

Here is the pure JavaScript equivelent of the above(I used ID for this):

document.getElementById("selection").style.marginBottom = "25px";

Hiding the Bottom Element

To remove that #bottom element you can simply increase your bottom distance to -100px since you're using position:absolute in order to hide it. Lets say you want to display it, you can then tie it to an event such as mouseover.

Here is a demo:

CSS:

#bottom {
  position:fixed;
  background-color: rgba(255, 0, 0, 0.5);
  width:100%;
  height:10%;
  text-align:center;
  bottom:-100px;
}

JS:

$("#container").mouseover(function(){
    $("#bottom").animate({bottom: "0px"});
});

$("#container").mouseleave(function(){
    $("#bottom").animate({bottom: "-100px"});
});

CODEPEN DEMO