Question

我正在尝试在此边界上留一些余量：

enter image description here

这是CSS代码：

.select_dev {
    width: 15vmax;
    height: 100%;
    background-color: #142431;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    border: 2.5px dashed #babfc5;
    border-spacing: 15px;
}

我已经尝试过border-spacing: 15px，但这是行不通的。请问该怎么办？

这是HTML代码：

<div class="select_dev">
        <div class="drgndrop">
            <div class="textninput">
                <center style="margin-top: 10px;">Faites glisser vos documents ici</center>
                <center style="margin-top: 5px;"><img width="60" height="auto" src="plus2.png"></center>
            </div>
        </div>
        <button onmouseover="help_hover(0, this)" onmouseout="hide_hover()" id="gear_button" style="background-color: Transparent; border: none; cursor:pointer; transform: translateX(+70px)"><img id="gear" src="UploadInactiv.png" style="width: 39px; height: auto"></button>
        <button style="background-color: Transparent; border: none; cursor:pointer; transform: translateX(+100px)" onclick="delete_files_selected()" onmouseover="help_hover(1, this)" onmouseout="hide_hover()"><img src="delete.png" style="width: 40px; height: auto"></button>
        <div class="acidjs-css3-treeview" style="margin-left: 5px"></div>
    </div>

谢谢你们！

Answer 1

您可以向div添加padding样式。

      .select_dev {
                width: 15vmax;
                height: 100%;
                background-color: #142431;
                position: fixed;
                left: 0;
                top: 0;
                z-index: 200;
                border: 2.5px dashed #babfc5;
                border-spacing: 15px;
                padding:10px;
            }

Answer 2

Margin在div外添加50像素

Padding在div内部添加50像素

如果运行代码段，您可以看到边距和填充的结果

body{
  background-color: yellow;
}
#margin{
  background-color: green;
  margin: 50px;
}
#padding{
  background-color: red;
  padding: 50px;
}

<body>
  <div id="margin"><h1>This div has margin</h1></div>
  <div id="padding"><h1>This div has padding</h1></div>
</body>

对于您的代码，应该是这样的

保证金

.select_dev {
    width: 15vmax;
    height: 100%;
    background-color: #142431;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    border: 2.5px dashed #babfc5;
    border-spacing: 15px;
    margin: 50px;
}

<div class="select_dev">
        <div class="drgndrop">
            <div class="textninput">
                <center style="margin-top: 10px;">Faites glisser vos documents ici</center>
            </div>
        </div>
        <div class="acidjs-css3-treeview" style="margin-left: 5px"></div>
    </div>

填充

.select_dev {
    width: 15vmax;
    height: 100%;
    background-color: #142431;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    border: 2.5px dashed #babfc5;
    border-spacing: 15px;
    padding: 50px;
}

<div class="select_dev">
        <div class="drgndrop">
            <div class="textninput">
                <center style="margin-top: 10px;">Faites glisser vos documents ici</center>
            </div>
        </div>
        <div class="acidjs-css3-treeview" style="margin-left: 5px"></div>
    </div>

我希望我的回答对您有所帮助试试代码，让我知道它是否有帮助

快乐编码：）

Answer 3

如果要在边框外留出空隙，请使用margin 如果边框内有间隙，请使用padding

body{
  margin: 0;
  background-color: #ddd;
}
.box{
      width: 15vmax;
      height: 100%;
      background-color: #142431;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 200;
      border: 2.5px dashed #babfc5;
      border-spacing: 15px;
      padding:10px;
      
      margin:10px; // this is what you need
}

<div class="box"></div>

将边距设置为边界-CSS

3 个答案: