CSS mapping: table; chrome spacing issue

Question

I use display:table; for the div element. In all other browsers that I tested, there are no problems. However, in Chrome 22 (the latter) and Canary, the div gets 1px spacing on both the left and right sides.

Any idea where the task lies?

EDIT:
margin , border , padding - all 0.

In addition, any table properties are deleted:

 border-spacing:0; border-collapse:collapse; table-layout:fixed; 

Answer 1

I had the same problem. This was caused by a hacking of Micro clearfix. Remote style .clearfix solved the problem.

Answer 2

I would also look at the space as a possible culprit and check with font-size: 0 .

Answer 3

I would reset margins and indents in all browsers.

 *{margin:0; padding:0;} 

Please note that you can also download the reset css file.

normalize.css or reset.css

Answer 4

The answer to this question solved my problem: CSS table cell in Chrome

They recommend adding table-layout: fixed to the element you applied display: table .

If your markup doesn't use .clearfix hack, as in my case, this can help you!

Answer 5

I noticed this problem back in 2015 - it only affects google chrome, and the only way to fix it is to move your screen: table to a child container, so if you have:

 <div style="width:50%; height:300px; display:table"> <div style="display:table-cell; vertical-align: middle;"> <p>Your centred content here</p> </div> </div> 

Change it to the following adding another div:

 <div style="width:50%;"> <div style="display:table; height:300px;"> <div style="display:table-cell; vertical-align: middle;"> <p>Your centred content here</p> </div> </div> </div> 

There seems to be a conflict in google chrome with width and display: a table when it applies to the same tag.

Open the following link in both chrome and firefox, and you will see that the right borders are aligned in firefox, but not in chrome, because it adds 1px extra space.

In short, my fix works in chrome :)

https://jsfiddle.net/2u1t8ffj/