font-size changes margin, why?

Question

I'm creating a side scrolling div for mobile devices and have run into an odd problem. If you run the code below with font-size commented out for the body style there is extra margin that is added at the sides of the .scroll_item. Set the font-size to 0 and it works just fine. I'm trying to avoid setting the font size in the .scroll_item style and would rather just inherit from what comes previous to this in the page.

Why is this happening and is there another way to correct it without setting the font-size to 0?

body {
  background-color: gray;
  padding: 0;
  margin: 0;
  overflow: hidden;
  /*font-size: 0;*/
}
#scroll_cont {
  height: auto;
  background-color: red;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: auto;
}
.scroll_item {
  width: 120px;
  height: 120px;
  padding: 5px;
  margin: 2px;
  background-color: blue;
  box-sizing: border-box;
  white-space: normal;
  display: inline-block;
  font-size: 20px;
  color: white;
}

<html>

<head>
  <title>Side Scroll Test</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no">

</head>

<body>
  <div id="scroll_cont">
    <div class="scroll_item">Test1</div>
    <div class="scroll_item">Test2</div>
    <div class="scroll_item">Test3</div>
    <div class="scroll_item">Test4</div>
    <div class="scroll_item">Test5</div>
  </div>
</body>

</html>

Eric N · Accepted Answer · 2016-11-05T16:51:19.377

This is a common problem devs have with inline-blocks. An inline-block acts a little like a block, a little like inline. What does that mean? Well a block is what you're thinking it should act like right now. However, inline means it acts sort of like text. And two inline elements broken by a line break normally get white space between them automatically.

For instance:

<span>I</span>
<span>don't</span>
<span>have</span>
<span>to</span>
<span>space</span>
<span>these!</span>

This would render with white space automatically even though I didn't include any. Kinda dumb, right? But thats how it goes. There are a number of hacks and tricks to avoiding this concern. Some set a margin-right of around -4px on inline-block elements that should be stacked side by side.
Others will just use a different display type like table or flexbox. You could also try floating them left and adding a clearfix hack to them. Leave me a comment if you're still stuck and/or check out Chris Coyier's solid post about this dilemma: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

score 3 · Answer 2 · answered Nov 05 '16 at 16:58

Setting font-size: 0 on the parent and setting the required font-size on the inline-block children is a standard way of removing the characteristic margin or whitespace between inline elements (inline, inline-block or any other inline display).

See demo below:

body {
  background-color: gray;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#scroll_cont {
  height: auto;
  background-color: red;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: auto;
  font-size: 0;
}
.scroll_item {
  width: 120px;
  height: 120px;
  padding: 5px;
  margin: 2px;
  background-color: blue;
  box-sizing: border-box;
  white-space: normal;
  display: inline-block;
  font-size: 20px;
  color: white;
}

<html>

<head>
  <title>Side Scroll Test</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no">

</head>

<body>
  <div id="scroll_cont">
    <div class="scroll_item">Test1</div>
    <div class="scroll_item">Test2</div>
    <div class="scroll_item">Test3</div>
    <div class="scroll_item">Test4</div>
    <div class="scroll_item">Test5</div>
  </div>
</body>

</html>

Another way, is the use of comments to overcome this whitespace (of course this a little bit tricky to manage) - see demo below:

body {
  background-color: gray;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#scroll_cont {
  height: auto;
  background-color: red;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: auto;
}
.scroll_item {
  width: 120px;
  height: 120px;
  padding: 5px;
  margin: 2px;
  background-color: blue;
  box-sizing: border-box;
  white-space: normal;
  display: inline-block;
  font-size: 20px;
  color: white;
}

<html>

<head>
  <title>Side Scroll Test</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no">

</head>

<body>
  <div id="scroll_cont">
    <div class="scroll_item">Test1</div><!--
    --><div class="scroll_item">Test2</div><!--
    --><div class="scroll_item">Test3</div><!--
    --><div class="scroll_item">Test4</div><!--
    --><div class="scroll_item">Test5</div>
  </div>
</body>

</html>

@PaulNeale let me know your feedback on this, thanks! – kukkuz Nov 05 '16 at 17:00 — kukkuz, Nov 05 '16 at 17:00

score 1 · Answer 3 · answered Nov 05 '16 at 16:46

One approach you probably won't like but will work is this:

body{
  background-color: gray;
  padding: 0;
  margin: 0;
  overflow: hidden;
  /*font-size: 0;*/
}
#scroll_cont{
  height: auto;
  background-color: red;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: auto;
}
.scroll_item{
  width:120px;
  height:120px;
  padding: 5px;
  margin: 2px;
  background-color: blue;
  box-sizing:border-box;
  white-space: normal;
  display:inline-block;
  font-size: 20px;
  color:white;
}

<div id="scroll_cont">
    <div class="scroll_item">
    Test1</div><div class="scroll_item">
    Test2</div><div class="scroll_item">
    Test3</div><div class="scroll_item">
    Test4</div><div class="scroll_item">
    Test5</div>
</div>

To explain what I am doing here: by starting next div right after previous one is closed (that is without line breaks os spaces) I prevent browsers from adding unwanted 'white-space' (it's not a 'margin' as you say. Well it is in English but not in CSS anyway)

Thanks every one. No perfect solutions but I have it working for now just setting font-size to 0 bit I'm going to swing back to it and try the others when I get a chance. — Paul, Nov 07 '16 at 01:54

score 1 · Answer 4 · answered Nov 05 '16 at 17:10

Here I am sharing 2 solution which is work form me

1) Remove the font-size:0 from body tag and add font-size:0 on parent div tag.

OR

2) You can also use display: flex property

#scroll_cont{
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

font-size changes margin, why?

4 Answers4

Linked