Why does changing the font size affect the margins?

Question

Why does changing the font size affect the margins?

While developing a side scrolling div for mobile devices, I encountered an unusual issue. When the font-size is commented out for the body style in the code snippet below, extra margin is added to the sides of the .scroll_item. However, when the font-size is set to 0, everything works fine. I am trying to find a solution without setting the font size directly in the .scroll_item style and instead inherit it from the previous page element.

What could be causing this behavior and is there an alternative way to resolve it without having to set 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>

html css

Answer 1

Answer №1

Dealing with inline-block elements can be a common challenge for developers. An inline-block behaves somewhat like a block and somewhat like an inline element. So, what does that mean exactly? A block generally takes up the full width available, while an inline element behaves more like text.

For example:

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

In this scenario, white space would automatically appear between each <span> element, even if it wasn't explicitly included in the code. It may seem counterintuitive, but that's how it works.

To address this issue, there are various hacks and techniques available. Some developers add a negative margin-right of around -4px to inline-block elements that should sit next to each other vertically.
Others opt for alternative display types like table or flexbox. Floating the elements left and applying a clearfix hack is another potential solution. If you're still struggling with this problem, feel free to leave a comment or read Chris Coyier's informative article on the topic: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

Dealing with inline-block elements can be a common challenge for developers. An inline-block behaves somewhat like a block and somewhat like an inline element. So, what does that mean exactly? A block generally takes up the full width available, while an inline element behaves more like text.

For example:

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

In this scenario, white space would automatically appear between each <span> element, even if it wasn't explicitly included in the code. It may seem counterintuitive, but that's how it works.

To address this issue, there are various hacks and techniques available. Some developers add a negative margin-right of around -4px to inline-block elements that should sit next to each other vertically.
Others opt for alternative display types like table or flexbox. Floating the elements left and applying a clearfix hack is another potential solution. If you're still struggling with this problem, feel free to leave a comment or read Chris Coyier's informative article on the topic: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

Answer №2

Implementing font-size: 0 on the parent element and specifying the necessary font-size on the child elements with inline-block display is a common technique to eliminate the inherent margin or whitespace between inline elements (such as inline, inline-block, or any other type of inline display).

Check out the demonstration 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>

Alternatively, using comments can also help in addressing this whitespace issue (although it may require more careful management) - refer to the 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>

Answer 4

Implementing font-size: 0 on the parent element and specifying the necessary font-size on the child elements with inline-block display is a common technique to eliminate the inherent margin or whitespace between inline elements (such as inline, inline-block, or any other type of inline display).

Check out the demonstration 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>

Alternatively, using comments can also help in addressing this whitespace issue (although it may require more careful management) - refer to the 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>

Answer 5

Answer №3

Here's an unconventional approach that may not be your favorite, but it does get the job done:

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>

In this setup, I'm placing the next div immediately after closing the previous one without any spaces or line breaks to avoid browsers adding unwanted 'white-space' (which isn't actually a 'margin' in CSS terms).

Answer 6

Here's an unconventional approach that may not be your favorite, but it does get the job done:

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>

In this setup, I'm placing the next div immediately after closing the previous one without any spaces or line breaks to avoid browsers adding unwanted 'white-space' (which isn't actually a 'margin' in CSS terms).

Answer 7

Answer №4

Here are two solutions that have worked for me:

1) To remove the font-size:0 from the body tag, you can instead add font-size:0 to the parent div tag.

OR

2) Another option is to use the display: flex property.

#scroll_cont{
display: -webkit-box;      /* Used in iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* Utilized in Firefox 19- (may be buggy but generally works) */
display: -ms-flexbox;      /* Transitional for IE 10 */
display: -webkit-flex;     /* Latest in Chrome */
display: flex;             /* Recommended in Opera 12.1, Firefox 20+ */
}

Answer 8

Here are two solutions that have worked for me:

1) To remove the font-size:0 from the body tag, you can instead add font-size:0 to the parent div tag.

OR

2) Another option is to use the display: flex property.

#scroll_cont{
display: -webkit-box;      /* Used in iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* Utilized in Firefox 19- (may be buggy but generally works) */
display: -ms-flexbox;      /* Transitional for IE 10 */
display: -webkit-flex;     /* Latest in Chrome */
display: flex;             /* Recommended in Opera 12.1, Firefox 20+ */
}

Why does changing the font size affect the margins?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Reducing the size of an internal label within a flex container

Tips for Adding Style to a Recursive Directory Structure Using CSS

Error in decoding Beautiful Soup

Real-time Exchange of HTML Data Forms

What is the best way to implement seamless transitions between different components in my code?

What could be causing my div to fall short of reaching the top of the page?

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

Issue with Angular custom tag displaying and running a function

Is there a way to display two words side by side in React components?

Combining Django and Vue.js for efficient module importing

Issues with CSS styling are affecting the display of a form

Is there a way in JavaScript to launch a link in a new tab and overlay a div on top of the existing content of the page?

What's the best way to include CSS and Javascript in an HTML document?

CSS does not appear to be showing on the banner

Having trouble getting the sass lighten functions to work properly with a variable

Unable to capture the text within the span element. Attempting to retrieve a response from a previously run javascript function

Creating a Authentic Screw Top Appearance with CSS

Having trouble with the PHP WHERE query - it's not functioning

Link is causing CSS style to malfunction

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them