CSS - completely remove spacing between columns?

Question

I have this HTML:

<div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>

And CSS:

.box {
    width: 300px;
    padding-top: 100px;
}
.row > div > div {
    width: 100px;
    height: 100px;
    margin: 0px;
}

I'm also using bootsrap (version 3).

I was able to remove margin between rows, but can't remove margin between columns. Is there a way to force it somehow? I need all "squares" next to each other without any margins (both between rows and columns).

You can see how it looks here: https://jsfiddle.net/a91zujkj/

score 0 · Answer 1 · answered Jul 02 '17 at 19:26

It's because .col-*-4 is wider than 100px, which is the width you've defined for the .thumbnail elements.

You can just remove the .col-* classes and use .pull-left instead.

.box {
    width: 300px;
    padding-top: 100px;
}
.row > div > div {
    width: 100px;
    height: 100px;
    margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

If you really want to use col- class, make sure to set the .thumbnail elements width to 100% and use a no-padding class on the col- elements.

Here is an example:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.box {
  width: 300px;
  padding-top: 100px;
}
.no-padding {
  padding-left: 0;
  padding-right: 0;
}
.thumbnail {
  width: 100%;
  height: 100px;
  margin: 0;
}

<div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>

You actually do not need to use col- classes at all and floats are not needed either. Another way to do this is using display: inline-block.

Here is how that looks:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.wrapper {
  width: 300px;
  padding-top: 100px;
  margin: 0 auto;
  font-size: 0;
}

.item {
  border: 1px solid #eee;
  width: 100px;
  height: 100px;
  display: inline-block;
  font-size: initial;
}

<div class="wrapper">
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
</div>

And if you're really brave you could also use CSS Grid layout. ;)

CSS Grid Layout

CSS Grid layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Here is how that goes:

.wrapper {
  padding-top: 100px;
  width: 300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
}

.item {
  border: 1px solid #ddd;
  height: 100px;
  width: 100px;
}

<div class="wrapper">
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
</div>

score 0 · Answer 3 · answered Jul 02 '17 at 19:33

Remove padding-left and padding-right for .col classes and then change width: 100px; to width: 100%; for .row > div > div

.box {
    width: 300px;
    padding-top: 100px;
}
.padding-0{
    padding-right:0 !important;
    padding-left:0 !important;
}
.row > div > div {
    width: 100%;
    height: 100px;
    margin: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>

score -1 · Answer 4 · answered Jul 02 '17 at 19:26

-1

Row has it's own style and add margin to element, you can remove it by adding :

.box >.row{
  margin:0;
}

answered Jul 02 '17 at 19:26

OB1.K

52
4

CSS - completely remove spacing between columns?

4 Answers4

Linked