White space after centering inline-block elements

Question

.calloutWrapper 
{
background: green;
height: 50%;

text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}

.callout {
width: 24%;
min-height: 100%;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background-color: blue; }


.stretch {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
vertical-align: top;
}

http://jsfiddle.net/yux07nom/

There is white space after the "callouts" seen with the blue backgrounds. This extends beyond the green background of "calloutWrapper" I believe its caused by the .stretch applied to the span.

I'm using Chrome as well -- If you scroll all the way down you'll notice that there is white space that extends beyond the blue boxes on the green background. — Tourtelot, Feb 05 '15 at 20:41
Definitely the .stretch. What are you trying to do with the stretch? — MiltoxBeyond, Feb 05 '15 at 20:44
From what I understand this is used in conjunction with the code from .callout to automatically evenly space the div's it's applied to. I based the code off http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs — Tourtelot, Feb 05 '15 at 20:46
From what I see, you are trying to align 4 boxes horizontally. Why don't just the boxes margin on the right of 2% and set the first box (:first-child) margin to 0 — Huangism, Feb 05 '15 at 21:07

score 0 · Answer 1 · edited Feb 05 '15 at 22:35

0

Inline-block elements will preserve one space in the HTML. Two choices:

Have no space between those inline-block elements in the HTML.
Float:left those inline-block elements

edited Feb 05 '15 at 22:35

mlegge

6,763
3
40
67

answered Feb 05 '15 at 20:50

David Anastasi

68
6

The problem is not with the spacing between, but the spacing after. – Tourtelot Feb 05 '15 at 20:52

score 0 · Answer 2 · answered Feb 05 '15 at 20:53

0

First off you close out the body twice which doesn't cause your problem but should be resolved

</body>
    <script>
    </script>
</body>

Then the white space is caused by your .stretch span display: inline-block; is the culprit

Remove that and your good to go. A bit more info about what you're trying to achieve with that span could help provide a better answer.

answered Feb 05 '15 at 20:53

Tim S

25
4

http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs Going for this -- but with no white space at the end – Tourtelot Feb 05 '15 at 20:55
In your code the .callout divs are response, but in that link provided the widths are fixed, and attempting to space them evenly. You should try using a responsive grid css, like bootstrap or foundation, alternatively here is a simple one you could just add the CSS to your project then use it for your responsive divs - http://codepen.io/SitePoint/pen/iGsJI – Tim S Feb 05 '15 at 21:41

Tim S · Answer 3 · 2015-02-05T21:57:23.837

If you are trying to achieve responsive boxes you could use a css responsive grid template like bootstrap or foundation.

Alternatively you could just float left and add margin right to the first 3 elements.

eg http://jsfiddle.net/yux07nom/5/

<div class="calloutWrapper">
    <div class="callout">Callout</div>
    <div class="callout">Callout</div>
    <div class="callout">Callout</div>
    <div class="callout last">Callout</div>
</div>

And the CSS

.callout {
    width: 24%;
    min-height: 100%;
    background-color: blue;
    float:left;
    margin-right:1.3333333333%;
}

.callout.last{
    margin-right:0;
}

score 0 · Answer 4 · answered Feb 05 '15 at 22:29

I'm not sure there's an ideal solution to this. Your best bet is to set the font size of the .calloutWrapper div to zero and then reapply a useful font-size value to the .callout divs, like this : http://jsfiddle.net/2dgx98ye/

Note however, that some older browsers, particularly some used on mobiles, try to apply a minimum font-size which breaks this. In modern browsers, even when the have a minimum font-size configured, do not enforce it on elements where the font-size is 0.

White space after centering inline-block elements

4 Answers4