如何使用jQuery或JavaScript来降低页边距 如何为选择框添加底部边距？

我已经试过了

#选择{页边距底部：23px；}

但这对我不起作用。有没有一种方法可以通过JavaScript或jQuery实现这一点

下面的片段：-

var startX=0，
startY=0，
开始=错误；
$（文档）.mousedown（函数（e）{
e、 预防默认值（）；
startX=e.pageX；
startY=e.pageY；
开始=真；
$（“#选择”）.css({
“顶端”：星状，
“左”：startX
});
});
$（文档）.mousemove（函数（e）{
如果（启动）{
$（“#选择”）.css({
“左”：startX>e.pageX？e.pageX:startX，
“顶部”：startY>e.pageY？e.pageY:startY
});
$（“#选择”）.css({
“高度”：Math.abs（例如pageY-startY），
“宽度”：Math.abs（e.pageX-startX）
});
}
});
$（文档）.mouseup（函数（）{
$（“#选择”）.css({
“顶部”：0，
“左”：0，
“高度”：0，
“宽度”：0
});
开始=错误；
startX=0；
startY=0；
});
$（文档）.on（'contextmenu'，function（））{
返回false；
});
正文{
背景：url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg)无重复底部中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
保证金：0；
}
#容器{
位置：绝对位置；
宽度：100%；
身高：90%；
顶部：0px；
}
#挑选{
位置：绝对位置；
背景色：rgba（0,0,0,0.25）；
-webkit盒阴影：插入0px 0px 0px 2px#f00；
-moz盒阴影：插入0px 0px 0px 2px#f00；
-ms盒阴影：插入0px 0px 0px 2px#f00；
-o形盒阴影：插图0px 0px 0px 2px#f00；
盒影：插入0px 0px 0px 2px#f00；
}
#底部{
位置：固定；
背景色：rgba（255,0,0,0.5）；
宽度：100%；
身高：10%；
文本对齐：居中；
底部：0；
}

不要选择框在这里！
你的意思是你不希望背景图片包含在
中吗

如果答案是肯定的，那么您只需移动
background:url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg)无重复底部中心固定

从
正文
到
#选择
：

    #selection {
//move the picture here
         background:url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg) no-repeat;
    //give the picture width and height otherwise you cant see the picture 
    //on the page because this <div> was 0px by 0px;
        width:100%;   
        height:100%;

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

#选择{
//将图片移到这里
背景：url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg)不重复；
//请给出图片的宽度和高度，否则您将看不到图片
//在页面上，因为这是0px乘0px；
宽度：100%；
身高：100%；
位置：绝对位置；
背景色：rgba（0,0,0,0.25）；
-webkit盒阴影：插入0px 0px 0px 2px#f00；
-moz盒阴影：插入0px 0px 0px 2px#f00；
-ms盒阴影：插入0px 0px 0px 2px#f00；
-o形盒阴影：插图0px 0px 0px 2px#f00；
盒影：插入0px 0px 0px 2px#f00；
}

您调整的
#选择
不起作用的原因是背景图片附着在整个页面上。您必须将该图片嵌套在
或
下，这取决于您希望看到的效果。
#选择
不会给您一个
页边距底部
，因为它是绝对定位的，而且它下面没有其他元素可以使其具有页边距底部

使用下面的示例进行说明：

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

使用JQuery和Vanilla JS应用保证金

如果您想使用jQuery应用
边距底部
，您可以将其添加到脚本文件中，请注意，我将其标识符从ID改为class改为target multiples

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

以下是与上述内容相对应的纯JavaScript（我使用了ID）：

隐藏底部元素

要删除
#bottom
元素，您只需将底部距离增加到
-100px
，因为您正在使用
位置：absolute
来隐藏它。假设您想要显示它，那么您可以将它绑定到一个事件，例如
mouseover

下面是一个演示：

CSS:

JS:

这个黑客怎么样：

或者这个黑客：


尽管使用此解决方案，
#选择
仍然可以拖到文档的最底部，但它避免了它位于底部栏（
#底部
）尽管如此。
您希望选择框位于何处？@Dinmyte我希望它位于内部。不要使用css，因为我不希望添加一些javascript或jQuery来添加我的笔的底部，查看JS文件的底部，了解如何使用jQuery应用边距。我添加了一个jQuery和一个vanilla JS方法来应用此样式。如果您只想隐藏它，可以将其不透明度设置为0。请添加第二个hack snippet。这是我添加到答案中的第二个代码，下面的链接是它的JSFIDLE示例。
$(".selection").css("margin-bottom", "25px");

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

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

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

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

#container {
    position: absolute;
    width:100%;
    height:100%;
    top:0px;

    -moz-transform: scale(1,0.90);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1,0.90);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(1,0.90);
    -webkit-transform-origin: 0 0;
    transform: scale(1,0.90);
    transform-origin: 0 0;
}

#container {
    position: absolute;
    width: 100%;
    height: 90%;
    top: 0px;
    overflow: hidden;
}