Creating Space Between an Element and Its Border

Creating space between an element and its border

I ended up using the multiple css technique (here), and using border-color: transparent to create a transparent spacing between the element and its border.

Space between border and content? / Border distance from content?

Add padding. Padding the element will increase the space between its content and its border. However, note that a box-shadow will begin outside the border, not the content, meaning you can't put space between the shadow and the box. Alternatively you could use :before or :after pseudo selectors on the element to create a slightly bigger box that you place the shadow on, like so: http://jsbin.com/aqemew/edit#source

CSS: how to add white space before element's border

You could use pseudo-element with position absolute instead of border for the red line. Then you should also add some padding-left or text-indent to p element.

p {

  border: 1px solid black;

  position: relative;

  padding-left: 10px;

}

p:before {

  content: '';

  border-left: 3px solid red;

  height: 100%;

  position: absolute;

  left: 5px;

}

<p style="width:350px;height:200px;background-color:grey;">

  Start editing to see some magic happen :)

</p>

Weird spacing between element and border in chrome

I had that problem too. A few pixels of the gap between content and borders. Also not regular, different spaces in each. I have seen this on Edge and Chrome. They both are WebKit based. I haven't seen it in Firefox. It seems like the problem is in WebKit itself.

My solution to that problem was to not use borders. Instead, I used

filter: dropshadow(0px 0px 0px 2px black);
box-shadow: 0px 0px 0px 2px black;  

These don't have that gap problem but if you are setting your

box-sizing: border-box;

You have an issue of not including border size within your width and height. For that problem, you can put your box shadow inside:

filter: dropshadow( inset 0px 0px 0px 2px black);

But this time, we face two more problems.

1. You can't make your box-sizing include the shadows. So shadow overlaps content.
2. Shadows are under the element you set. So you cannot see them.

To solve this you either can give your element a ::before and give the shadow to that pseudo element

OR

You can put your element in a container div and give the shadow to the container. This way, you can also give padding in the size of borders (shadows) to the container to get make its size include its fake borders and not overlap them. Also, you need to center your element inside that container.

Create space between the inside element and the outside one

Margins (especially on top and bottom) of elements collapse when they touch together or cover parent/child element margins.

As these rules may get a little complicated, not so senior css users should avoid using margins as much as possible and use paddings instead.

On your case, as parent element doesn't have border or padding, the browser uses biggest margin of parent and child and puts this around parent element.

More information here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

CSS border-bottom getting space between elements

First thing.. Close that a tag...

<li><a href="#" class="selected">Dashboard</a></li>

Once you have done that you will get the following result (I have removed the ul list-style, margin and padding, I am assuming you have done the same in other code not shared in the question)...

ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

#nav li a {

  border: 1px solid pink;

}

#nav li a {

  text-decoration: none;

  color: #ccc;

  display: block;

  padding: 10px;

  font-size: 0.8em;

  border-bottom: 1px solid #0A0A0A;

}

<div id="container">

        <div class="sidebar">

            <ul id="nav">

              <li><a href="#" class="selected">Dashboard</a></li>

              <li><a href="#">Booter Hub</a></li>

                <li><a href="#">Stresser</a></li>

                <li><a href="#">Friends</a></li>

                <li><a href="#">Search</a></li>

                <li><a href="#">Purchase</a></li>

            </ul>

        </div>

        <div class="content">

Weird space between td and its border element : CSS tables

on a personal level, having had a thousand problems with borders in HTML tables,
I ended up opting for a radical solution: no border at all!

I use border-collapse: separate; and I play on border-spacing

in addition it lightens the css to write

I recommend it

in your case:

* {
  padding : 0;  
  margin  : 0;
  }
html, body {
  height : 100%;
  width  : 100%;
  background-color: #658d8d;  /* this one is mine... */
  }
.table-container {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  padding-bottom : 50px;
  font-size      : 20px;
  margin: 1em;
  }
table {
  font-size        : 15px;
  border-collapse  : separate;
  border-spacing   : 4px;
  background-color : black;
  border-radius    : 33px 33px 0  0;
  width            : 90vw;
  }
thead td {
  font-size    : 20px;
  font-weight  : 500;
  }
td {
  background-color : white;
  height           : 60px;
  text-align       : center;
}
thead td:first-child { border-top-left-radius: 29px;  }
thead td:last-child  { border-top-right-radius: 29px; }

table button {
  cursor           : pointer;
  height           : 100%;
  width            : 100%;
  border           : 0;
  background-color : white;
  color            : #d90429;
  }
.progress-bar {
  background-color: orange;
  }
.progress-bar > div {
  background-color : green;
  height           : 100%;
  width            : 50%
  }

<div class="table-container">
  <table>
    <thead>
      <tr>
        <td>Task Type</td>
        <td>Target Time (in Minutes)</td>
        <td>Percentage Achieved</td>
        <td>Add/Delete Tasks</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Maths</td>
        <td>120</td>
        <td class="progress-bar"><div>50</div></td>
        <td><button type="button">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

---

Related Topics