logo标签列表

字体大小改变会影响外边距，为什么？

htmlcss
3
我正在为移动设备创建一个侧向滚动的div，但遇到了一个奇怪的问题。如果取消body样式中的字体大小注释，则会在.scroll_item的两侧添加额外的边距。将字体大小设置为0，它就可以正常工作。我试图避免在.scroll_item样式中设置字体大小，而是希望继承页面上之前的内容。
为什么会出现这种情况？是否有其他方法可以纠正它，而不必将字体大小设置为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>

line-height: 1怎么样？ - user6360214
4个回答
3
在父元素上设置“font-size:0”，并在“inline-block”子元素上设置所需的“font-size”是一种标准方法，可以消除“行内元素”（包括“inline”、“inline-block”或任何其他“inline”显示）之间的特征“margin”或“whitespace”。请参见下面的演示： 

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>

另一种方法是使用注释来解决这个空格问题（当然这需要一些技巧来管理）- 请参见以下演示：

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，请告诉我您对此的反馈，谢谢！ - kukkuz
3

开发人员在使用内联块时经常遇到的问题是，内联块的行为类似于块和内联元素的混合体。这是什么意思呢？块应该就像你现在想象的那样。然而，内联元素的意思是它的行为有点像文本。而两个被换行符分隔的内联元素通常会自动添加空格。

例如：

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

即使我没有包含任何空格，这段文字也会自动渲染出白色空格。有点愚蠢，不是吗？但事情就是这样。
有许多技巧和窍门可以避免这个问题。一些人在应该并排堆叠的内联块元素上设置大约-4像素的右边距。
其他人只需使用不同的显示类型，如表格或弹性盒子。您还可以尝试将它们向左浮动，并添加一个clearfix hack。如果您仍然无法解决问题，请给我留言和/或查看Chris Coyier关于这个困境的全面文章：https://css-tricks.com/fighting-the-space-between-inline-block-elements/
1

你可能不喜欢但有效的一种方法是：

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>

我在这里的做法是：在上一个div关闭后立即开始下一个div（即不使用换行符或空格），以防止浏览器添加不必要的“白色空间”（虽然你说它不是“边距”，但在英语中是，但在CSS中不是）。
谢谢大家。虽然没有完美的解决方案，但我已经让它工作了，只需将字体大小设置为0即可。等有时间了，我会再回来尝试其他方法的。 - Paul
1

我在这里分享两种解决方案，它们对我有效：

1）从body标签中删除font-size:0，并在父div标签上添加font-size:0。

或者

2）您也可以使用display:flex属性。

#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+ */
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接