What is the space before Confirmation

Question

First I was unable to find related answer since I don't know if it's about inline-block or not so maybe there's already something about inline-block in stackoverflow but since my question is to know where is the problem. I'm asking about where the problem is not specifically about inline-block.

Also the question in the title isn't related to how to remove the space but what is it...

If you look at this JSFiddle, there's a space in front of Confirmation. You don't need to inspect the element to see it. Just hovering over there and the cursor changes for a text cursor.

I'm unable to figure out what is that space because Confirmation which is the same as Name and Name takes all the space as it should.

.GridHeader {
 width:100%;
 height:25px;
 background-color:#0860a3;
 white-space:nowrap;
 border-bottom:1px solid lightgray;
 overflow:hidden
}
.GridColumn {
 border-right:1px solid lightgray;
 display:inline-block;
 padding-left:5px;
 padding-right:5px;
 color:white;
 height:25px;
 line-height:25px;
}

<div id="GridHeader" class="GridHeader">
   <div id="colName" class="GridColumn" style="cursor:pointer;width:auto">Name</div>
   <div id="colConfirmation" class="GridColumn" style="cursor:pointer;width:auto">Confirmation</div>
</div>

If the system says that you should add the code to the question, then do so. — JJJ, Aug 14 '16 at 12:11
BTW, you question is genuine. So please add the code here. And to find the reason, please check the differences between inline and inline-block css — Akshay Khandelwal, Aug 14 '16 at 12:13
Sorry about the code I didn't know it was so important. Now I see it's cool I'll use it in the future. — Marc Roussel, Aug 14 '16 at 12:18
Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Aziz, Aug 14 '16 at 12:20
Ok I changed display:inline-block for float:left which remove the space so if I understand the display:inline-block is the one addin that space ? — Marc Roussel, Aug 14 '16 at 12:21
@Aziz Duplicate of [Duplicate of stackoverflow.com/q/5078239 – Siguza](http://stackoverflow.com/questions/38942100/what-is-the-space-before-confirmation#comment65239225_38942100) :D — akinuri, Aug 14 '16 at 12:21

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

Your column elements have display: inline-block. The whitespace between the <div> elements in your markup is therefore interpreted as inter-word spacing.

If you leave the CSS the same and change the markup, it'll work:

<div id="colName" class="GridColumn" style="cursor:pointer;width:auto">Name</div><div id="colConfirmation" class="GridColumn" style="cursor:pointer;width:auto">Confirmation</div>

The suggested duplicate question explains more about such difficulties with inline-block layout and provides some other solution ideas.

edited May 23 '17 at 11:44

Community

1
1

answered Aug 14 '16 at 12:15

Pointy

405,095
59
585
614

1

This is a duplicate and should be flagged/closed as such! – Siguza Aug 14 '16 at 12:15
@Siguza perhaps, but answer downvotes should be given because of answer quality alone, and not based on whether there's a duplicate. – Pointy Aug 14 '16 at 12:17
1

@Siguza and while I agree that that question/answer is extremely useful, there's no way that this OP or anybody else wondering about a similar layout mystery would know to search for that question title. – Pointy Aug 14 '16 at 12:19
2

The downvote button states: "This answer is not useful". Answering duplicate questions is counter-productive ("not useful") because in the worst cases it discourages potential askers to do research by themselves, and even in the least-bad cases, it fragments information. And while I agree that inexperienced users can't be expected to find that question by themselves, a) that doesn't make this question any less of a duplicate, and b) part of the point of closing-as-duplicate is to establish "sign posts" pointing to that question, so that in the future it can be found by broader search terms. – Siguza Aug 14 '16 at 12:24
@Siguza well, it's your privilege here to wield your vote powers as you see fit, but the fact is that there are *thousands* of useful, much-upvoted answers on questions flagged as duplicates, and I'm sure thousands of people have been helped by them. Things aren't always black-and-white when it comes to questions about "usefulness". – Pointy Aug 14 '16 at 12:40
I tend to agreed with Pointy. I wasn't able to find what I was looking for since I don't know where the problem is so it is very hard to avoid asking something when you don't find a related answer. – Marc Roussel Aug 14 '16 at 12:42

What is the space before Confirmation

1 Answers1