CODEWITHSUNDEEP
htmlcss
zidanow
zidanow

Reputation: 700

put margin on border - css

I am trying to put some margin to this border :

enter image description here

Here is the css code : 

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

I already tried border-spacing: 15px, but this doesn't work.. How can I do it please ?

Here is the HTML Code : 

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

Thank you guys !

Upvotes: 2

Views: 11707

Answers (3)

J.vee
J.vee

Reputation: 619

Margin adds 50 px on the outside of the div

Padding adds 50 px on the inside of the div

You can see the results of the margin and padding if you run the code snippet

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>

For your code it would be something like this

Margin

.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>

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: 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>

I hope my answer was helpful Try the code and let me know if it helped

Happy coding :)

Upvotes: 2

Rahul
Rahul

Reputation: 4364

If you want gap outside border then use margin if gap inside border use 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>

Upvotes: 0

Asif vora
Asif vora

Reputation: 3359

you can add padding style to 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:10px;
            }

enter image description here

Upvotes: 0

Related Questions