No Border-Spacing Before First Item and After Last Item

CSS - Removing border-spacing on first and last columns

Here's a way of doing this (based on your second example):

Remove border-spacing from the table and then add a right border in every td, except the last one.

.grid td {
  padding: 0px 5px 0px 5px;
  border-right: 3px solid white;
}

.grid td:last-child {
  border-right: 0;   
}

jsFiddle Demo

Remove margins between container for border-spacing?

You can do the trick using borders, I've created a small demo: http://codepen.io/anon/pen/rHosz

div {
  background: grey;
}
ul {
  padding: 0;
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  padding-top: 5px;
}
li {
  display: table-cell;
  background: gold;
  border-left: 5px solid grey;
}
li:first-child{
  border-left: none;
}

Table-cell first and last spacing

Here's a fiddle.

Instead of border-spacing on the whole menu, use the border attribute on the list items:

.menu {
    list-style-type: none;
    /*border-spacing:3px 0px;*/  <-----remove this
    padding: 0px;
    display: table;
    margin: 5px 0px 0px;
    text-align:center;
    height: 26px;
    width: 960px;

}

.menuTab {
    background-color: #D2DCE0;
    display: table-cell;
    position: relative;
    margin:0px 5px 0px 0px;
    padding:6px 0px;
    width: auto;
    cursor: default;
    color: #002F68;
    border-left: 3px solid #999;  <-----Add this
}

Then, to correct the border on the far left add this pseudo selector (ie8 compatible):

.menuTab:first-child{
     border-left: none;   
}

Remove padding from first and last elements in a row

While all other answers seem to be correct, I would do it using flexbox since it gives you more flexibility on the layout. Flexbox has a special property for that called justify-content and the value you want to assign to it is space-between.

.wrap {  
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      align-content:flex-start;
      margin: 0 auto;
      width: 1024px;
      height: 800px;
      background-color: yellow;
    }

.box {
    box-sizing: border-box;
    width:calc(33.3% - 5px);
    margin-bottom:5px;
    height: 200px;
}

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

JSFiddle

CSS :after and :before to create spacing for table not working properly

Since the comment worked for you, here is the answer!

Before and after is not the recommended way to create space between elements. Only in few cases and very rarely you re going to need before and after for spacing.

In general the two most common ways to give some distance between elements.

Margin

For your case, margin-top would push the element down by 2rems. Margin-bottom would create space between the element and the next. In this space however, you can not do anything (eg. Style it) since it is a fix distance between elements

Padding

Padding pushes the content down BUT the distance between the elements is a part of the element itself. So if you add a background-color: blue; you will have the space with a blue background as well.

Some visual representation:

.row p {
  margin:0;
}
.div-2 {
  background:orange;
  margin:2rem 0;
}

.div-4 {
  background:blue;
  padding:2rem 0;
}

<div class="container">
    <div class="row div-1">
        <p>Irrelevant Item</p>
    </div>
    <div class="row div-2">
        <p>With Margin</p>
    </div>
    <div class="row div-3">
        <p>Irrelevant Item</p>
    </div>
    <div class="row div-4">
        <p>With Padding</p>
    </div>
    <div class="row div-5">
        <p>Irrelevant Item</p>
    </div>
</div>

How to remove border from elements in the last row?

You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.

.qa {  border-bottom: 1px solid #ccc;  margin-bottom:-1px;  margin-top:1px; /*to rectify the bottom margin, we can also consider padding-bottom*/    /*irrelevant styles*/  padding: 5px;  margin-left:5px;  margin-right:5px;  box-sizing: border-box;  flex:1 1 40%;}
.wrapper {  display: flex;  flex-wrap: wrap;  flex-direction: row;  overflow:hidden;}

<div class="wrapper">  <div class="qa">    <div>Question</div>    <div>Answer<br>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer<br>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer<br>Answer</div>  </div></div>

Can't remove border spacing in table

I was able to fix this by changing two things.

To get your image to stick to the right-side of the column, you need to increase your padding of the second cell from 18px to 30px. Alternatively, you could make each cell the same width, and then float the image to the right.

To get rid of the extra padding underneath the image, you will want to add display: block; to the affected image. <img> is an inline element, therefore it will leave extra padding underneath itself to make room for other elements like text.

If you cannot use display: block; for whichever reason, vertical-align: bottom; will work as well. This will allow you to keep the image inline, and will set the vertical alignment of the image so it matches the bottom of the table cell.

---

Related Topics