Display inline block with fluid Design not aligning same line

Question

I am using Fluid web design taking widths in "Percentages". I also reset all Margins and Paddings to default 0px. There is no border in any div. Still, why be default these are not aligned in same line???

Example:

<html> 
<head>
<style>
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style> 
</head>
<body> 

<div class="divOne">One</div>
<div class="divTwo">Two</div>
<div class="divThree">Three</div>

</body> 
</html>

Please, someone help me out. How in world is this not aligned in same line. But if I reduce % of any of these to go below 100% (like 98% or less), then these get aligned. But, if there is no margin, no padding. Why is this gap of width required?

Just drop that old `inline-block` hassle and embrace [Flex almighty](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — Jeremy Thille, Dec 11 '17 at 08:34
I've provided a practical demonstration on how to remove "white spaces" between `inline-block` elements, with explanations on why this occurs and alternative methods worth exploring (spoiler: they *don't* include `flex-box`). Take a look: https://codepen.io/UncaughtTypeError/pen/ypBMXB — UncaughtTypeError, Dec 11 '17 at 08:44

score 1 · Accepted Answer · answered Dec 11 '17 at 08:06

1

You need to add HTML comments between your divs to cancel the whitespace interpreted by the browser :

*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}

<div class="divOne">One</div><!--
--><div class="divTwo">Two</div><!--
--><div class="divThree">Three</div>

answered Dec 11 '17 at 08:06

Zenoo

11,719
4
38
57

From where in world did these whitespace came? I checked, there were no space left, but only "Enter" to go to next line! :( – Deadpool Dec 11 '17 at 08:07
1

That's the thing. The newline is interpreted as a whitespace ^^ – Zenoo Dec 11 '17 at 08:08
Like you said it means that he always need comments which is not true as there is more ways to do it :) – Temani Afif Dec 11 '17 at 08:10
1

I'm sharing the method I use everyday. Feel free to share yours. – Zenoo Dec 11 '17 at 08:11
i flag it as duplicated so you can see the link above for the remaining methods ;) as this is a common issue – Temani Afif Dec 11 '17 at 08:13

score 1 · Answer 2 · answered Dec 11 '17 at 08:24

Weird space that inline-blocks give. https://css-tricks.com/fighting-the-space-between-inline-block-elements/

You can have those three divs in one row to avoid any hacks/tricks.

https://jsfiddle.net/dghkcg04/

<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>

score 0 · Answer 3 · answered Dec 11 '17 at 08:13

The browser interprete de div like a white space so doing this to get it:

<!DOCTYPE html>
<html> 
<head>
<style>
*{
    margin:0;
    padding:0;
}
div{
display:inline-block;
margin:0;
padding:0;
}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style> 
</head>
<body> 

<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>

</body> 
</html>

Display inline block with fluid Design not aligning same line

3 Answers3