How to remove gaps between divs?

Question

I have gaps between divs, it happens because I have following css rules

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

actually the reason is box-sizing property, the question is how to disable this rule only for parent div and cos I need this rule for all other elements?

He is my screen with all ruls

With this configuration it works, but after this I have a problem with all other elements

Here is code in fiddle https://jsfiddle.net/4j27tsdL/

How you do this would depend on the HTML which you haven't included in the question — Rory McCrossan, Mar 21 '17 at 14:47
As Rory points you can create a new selector to override that rule based on your HTML structure ... but Aside are you sure the gaps are generated by that property ? I don't see how the box-sizing could create those gaps — DaniP, Mar 21 '17 at 14:49
actually this rule from Bootstrap v3.1.1 (http://getbootstrap.com) file, and looks like ` *,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} ` — Denys Medvediev, Mar 21 '17 at 14:52
I don't think it is that property that is causing those gaps. Could you post all of your relevant code. — spirift, Mar 21 '17 at 14:52
I'm guessing the gaps are coming from the line breaks in the HTML where you probably have every `div` on it's own line. You can either connect them via comments, or `font-size:0` their parent container and they go away, but I have yet to find a better solution. — Waxi, Mar 21 '17 at 14:54
I was looking at this question [link](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements), but it does not help me — Denys Medvediev, Mar 21 '17 at 15:16
I think 'absoluted position' is not a reason, cos when I uncheck box-sizing it woks as I expect, please look at screen3 — Denys Medvediev, Mar 21 '17 at 15:25
You are right @nightmare I have checked again and any of the already posted answers will work for you using the classname `OrderRege145...` — DaniP, Mar 21 '17 at 15:28
Guys I added https://jsfiddle.net/4j27tsdL/ so you can check it — Denys Medvediev, Mar 21 '17 at 15:39
Check this with the selector `#test > div` https://jsfiddle.net/4j27tsdL/5/ — DaniP, Mar 21 '17 at 15:46
It works in your example, thanks a lot!! I'll check it in my code — Denys Medvediev, Mar 21 '17 at 16:20

score 1 · Accepted Answer · answered Mar 21 '17 at 16:21

1

I think you are doing good. Just need to change the value of property. Try this once. It is fully tested.

*, :after, :before {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

answered Mar 21 '17 at 16:21

Mamta Thakur

147
1
9

Bhojendra Rauniyar · Answer 2 · 2017-03-21T15:03:09.673

You need to override the children:

.childElements{
  box-sizing: content-box;
}

But, for your question, only to remove the border-box from parent and not the children elements then you need to use css for both again even you applied on *: Also, note the following wouldn't work as you're expecting the gap. The above css rule work.

.parents{
  box-sizing: content-box;
}
.childElements{
  box-sizing: border-box;
}

:) The confusing answer for confusing question for someone...

score 0 · Answer 3 · answered Mar 21 '17 at 14:51

0

How about

.parents-parent > .parent {
  box-sizing: content-box;
}

when you know the parent because * > .parent would be too much.

answered Mar 21 '17 at 14:51

Atif

10,623
20
63
96

score 0 · Answer 4 · answered Mar 21 '17 at 14:52

Assuming your element is called .myClass, add this to your CSS.

.myClass, .myClass:before, .myClass:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

More info on box sizing.

How to remove gaps between divs?

4 Answers4