/    Sign up×
Community /Pin to ProfileBookmark

inline-block spacing problem

Copy linkTweet thisAlerts:
Oct 12.2017

Could someone explain to me why there is a space between
the inline-block elements in the following code.

I can increase the margin spacing, but I can not eliminate it
and I have no reason or explanation why.
?

[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> inline-block demo </title>

<!– From: https://css-tricks.com/snippets/css/clear-fix/ –>
<style>
.box { height: 150px; width: 25%; border: 1px solid black; }

.inline-block { display: inline-block; margin: 0; background-color: lime; }
</style>

</head>
<body>

<div> <h2>inline-block Class</h2>
<div class=”box inline-block”>inline-block 1</div>
<div class=”box inline-block”>inline-block 2</div>
<div class=”box inline-block”>inline-block 3</div>
</div>
<div>
inline-block element<br>
Why the spaces between the blocks when margin:0 ?
</div>

</body>
</html>
[/code]

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumOct 12.2017 — The reason is that there are blanks and a linebreak between the divs. This is text and the browser renders it to an empty space. Remove them and every thing is fine:
&lt;div&gt;
&lt;h2&gt;inline-block Class&lt;/h2&gt;
&lt;div class="box inline-block"&gt;inline-block 1&lt;/div&gt;&lt;div class="box inline-block"&gt;inline-block 2&lt;/div&gt;&lt;div class="box inline-block"&gt;inline-block 3&lt;/div&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@JMRKERauthorOct 12.2017 — The reason is that there are blanks and a linebreak between the divs. This is text and the browser renders it to an empty space. Remove them and every thing is fine:
&lt;div&gt;
&lt;h2&gt;inline-block Class&lt;/h2&gt;
&lt;div class="box inline-block"&gt;inline-block 1&lt;/div&gt;&lt;div class="box inline-block"&gt;inline-block 2&lt;/div&gt;&lt;div class="box inline-block"&gt;inline-block 3&lt;/div&gt;
&lt;/div&gt;[/QUOTE]

Aha! I thought spaces were ignored.

I had a work-around, but wanted to understand the underlying principles.
<i>
</i> .inline-block { display: inline-block; [COLOR="#FF0000"]margin: 0 -2px;[/COLOR] background-color: lime; }


Thanks 'Sempervivum'.
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...