CSS inline-block white space between elements

Question

I want to remove or reduce the white-space between elements. This is my code:

.Col1 {
    display:inline-block;
    width:50%;
    margin:0;
}

.Col2 {
    display:inline-block;
    width:50%;
    margin:0;
}

<div class="Col1"><h4>Art/Dance:</h4></div>
<div class="Col2"><p><span id="Art_S">$123</span></p></div>
 <!-- Row 2 -->
<div class="Col1"><h4>Cloth:</h4></div>
<div class="Col2"><p><span id="Cloth_S">$123</span></p></div>
 <!-- Row 3 -->
<div class="Col1"><h4>Education:</h4></div>
<div class="Col2"><p><span id="Education_S">$123</span></p></div>

score 1 · Accepted Answer · answered Sep 19 '14 at 00:13

1

use:

  display: inline-block;
  margin-right: -4px;

Solution 1: font-size: 0 on Parent

.inline-block-list { /* ul or ol with this class */
    font-size: 0;
}

.inline-block-list li {
    font-size: 14px; /* put the font-size back */
}

Solution 2: HTML Comments

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

Solution 3: Negative Margin

.inline-block-list li {
    margin-left: -4px;
}

Solution 4: Dropping Closing Angle

<ul>
    <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

answered Sep 19 '14 at 00:13

alessandrio

4,282
2
29
40

Still the white space, please take a look to my code: http://jsfiddle.net/AWMMT/41/ – Gabiel Matos Rodriguez Sep 19 '14 at 00:22
I need more explanation on the problem – alessandrio Sep 19 '14 at 00:24
theres a gap between each
. And I whant to remove or reduce this white space.
– Gabiel Matos Rodriguez Sep 19 '14 at 00:27
refers to the height space – alessandrio Sep 19 '14 at 00:31
Yes, the height. thank you very much!! I use height:1px; and its work! thank you again! – Gabiel Matos Rodriguez Sep 19 '14 at 00:32
is not advisable to use `height:1px;`. you add: `p,h4{margin:0;padding:0;}` – alessandrio Sep 19 '14 at 00:35
is a pleasure to help – alessandrio Sep 19 '14 at 00:38

CSS inline-block white space between elements

1 Answers1