Eliminating space between horizontal elements

Question

I'm trying to generate a web page with a diagram that shows how a word is broken down into bit fields. The way I want it to appear is for each field to appear as a row of boxes (one bit per box), and for the fields to be separated by some space. There will be a label below each field. This is what I've tried:

<HTML>
<HEAD>
   <TITLE>Title</TITLE>
   <STYLE type="text/css">
   .left-bit { border-style: solid dotted solid solid; border-width: thin;
               padding-left: 0.05in; padding-right: 0.05in;
               margin-left: 0; margin-right: 0;
               letter-spacing: 0; word-spacing: 0 }
   .middle-bit { border-style: solid dotted solid none; border-width: thin;
               padding-left: 0.05in; padding-right: 0.05in;
               margin-left: 0; margin-right: 0;
               letter-spacing: 0; word-spacing: 0 }
   .right-bit { border-style: solid solid solid none; border-width: thin;
               padding-left: 0.05in; padding-right: 0.05in;
               margin-left: 0; margin-right: 0;
               letter-spacing: 0; word-spacing: 0 }
   .single-bit { border-style: solid; border-width: thin;
               padding-left: 0.05in; padding-right: 0.05in;
               margin-left: 0; margin-right: 0;
               letter-spacing: 0; word-spacing: 0 }
   .bit-field-label { font-size: smaller; font-weight: bold }
   </STYLE>
</HEAD>
<BODY>
   <DIV style="text-align: center">
     <DIV style="text-align: center; vertical-align: top; display: inline-block">
       <CODE>
       <SPAN class="single-bit">a</SPAN>
       </CODE><BR>
       <SPAN style="display: inline-block" class="bit-field-label">field A</SPAN>
     </DIV>
     <SPAN style="padding-right: 0.1in"></SPAN>
     <DIV style="text-align: center; vertical-align: top; display: inline-block">
       <CODE>
       <SPAN class="left-bit">b</SPAN>
       <SPAN class="middle-bit">b</SPAN>
       <SPAN class="right-bit">b</SPAN>
       </CODE><BR>
       <SPAN class="bit-field-label">field B</SPAN>
     </DIV>
     <SPAN style="padding-right: 0.1in"></SPAN>
     <DIV style="text-align: center; vertical-align: top; display: inline-block">
       <CODE>
       <SPAN class="left-bit">c</SPAN>
       <SPAN class="middle-bit">c</SPAN>
       <SPAN class="middle-bit">c</SPAN>
       <SPAN class="middle-bit">j</SPAN>
       <SPAN class="right-bit">c</SPAN>
       </CODE><BR>
       <SPAN class="bit-field-label">field C</SPAN>
     </DIV>
   </DIV>
</BODY>
</HTML>

Basically, I've tried using borders to set up a box for each bit; each bit field and the label below it are supposed to be in their own "box", with the row of bits and label centered within the box, then there's to be a gap of a fixed size between each box horizontally, and then the whole thing is centered.

The result is almost correct except that I can't get the bits in each field to run up against each other. Here's a screenshot. As you can see, I tried getting rid of the space between bits by setting the margins, letter-spacing, and word-spacing to 0, to no avail. I also tried putting each group into another DIV like this:

       <DIV style="display: inline-block">
         <SPAN class="left-bit">b</SPAN>
         <SPAN class="middle-bit">b</SPAN>
         <SPAN class="right-bit">b</SPAN>
       </DIV>

which had no effect.

Any ideas on what controls this space between the boxes, and how to override whatever it does? (I'm open to other approaches, and I might have to try some kind of <TABLE>, but I'd appreciate an explanation of what's going on even if I have to change my approach.)

I'm using Chrome 37.0. I haven't tried this on other browsers (except an earlier version of IE which apparently doesn't recognize inline-block at all.)

I believe this is what you're looking for: http://stackoverflow.com/a/19038859/2680216 — Josh Crozier, Sep 16 '14 at 01:16
Crimeney, you're right. It works great if I put everything on one line with no intervening spaces... — ajb, Sep 16 '14 at 01:20
Also see http://stackoverflow.com/questions/4969082/unwanted-margin-in-inline-block-list-items, http://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html, http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements, http://stackoverflow.com/questions/13589883/ghost-space-between-inline-block-elements-in-chrome-safari-and-firefox, etc. etc. — , Sep 16 '14 at 02:40

dippas · Accepted Answer · 2014-09-30T01:15:12.400

0

you could have your HTML cleaner but the problem is the display:inline-block create gaps, so you need to remove unnecessary spaces between your HTML tags or reset font-size to 0.

check it here :

Fighting the Space Between Inline Block Elements

There is more solutions on the link above.

Plus you can use display:block; float:left instead.

edited Sep 30 '14 at 01:15

answered Sep 16 '14 at 01:18

dippas

58,591
15
114
126

score 0 · Answer 2 · answered Sep 16 '14 at 01:22

combining elements like so will remove the space

<span style="display:inline-block;">Hello</span><span style="display:inline-block;">World</span>

it's a hassle I know but it works somehow. you want to put those styles in an external style sheet, not inline like I have them here.

Eliminating space between horizontal elements

2 Answers2

Linked