Question

我为移动设备创建了一个侧滚动div并遇到了一个奇怪的问题。如果您运行下面的代码，并且为体型注释掉了font-size，则会在.scroll_item的两侧添加额外的边距。将font-size设置为0，它可以正常工作。我试图避免在.scroll_item样式中设置字体大小，而宁愿继承页面中之前的内容。

为什么会发生这种情况，是否有其他方法可以在不将font-size设置为0的情况下进行纠正？

＆＃13;

public void run() {

            HttpURLConnection connection = null;
            try {
                URL url = new URL("https://api.cognitive.microsoft.com/bing/v5.0/images/search");
                connection = (HttpURLConnection) url.openConnection();
                connection.setRequestMethod("POST");
                connection.setDoInput(true);
                connection.setDoOutput(true);
                connection.setConnectTimeout(8000);
                connection.setReadTimeout(8000);
                connection.setUseCaches(false);

                connection.setRequestProperty("Ocp-Apim-Subscription-Key", "562eaaada4b644f2bea31a454f26d905");

                OutputStream out = connection.getOutputStream();
                DataOutputStream params =new DataOutputStream(out);
                params.writeBytes("q=dog&count=10&offset=0&mkt=en-us&safeSearch=Moderate");
                out.close();

                connection.connect();
                InputStream in = connection.getInputStream();


                BufferedReader reader = new BufferedReader(new InputStreamReader(in));
                StringBuilder response = new StringBuilder();
                String line;
                while ((line = reader.readLine()) != null) {
                response.append(line);
                }

                Message message = new Message();
                message.what = SHOW_RESPONSE;
                message.obj = response.toString();
                handler.sendMessage(message);
            } catch (Exception e) {
                // TODO: handle exception
            } finally {
                if (connection != null) {
                    connection.disconnect();
                }
            }

        }

＆＃13;

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;
}

＆＃13;

Answer 1

这是开发人员使用内联块的常见问题。内联块的作用有点像块，有点像内联。那是什么意思？那么你认为它应该就像现在一样。但是，内联意味着它有点像文本。并且由换行符断开的两个内联元素通常会自动在它们之间获得空白区域。

例如：

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

即使我没有包含任何内容，也会自动呈现空格。有点傻，对吧？但那就是它如何发展。有许多黑客和技巧可以避免这种担忧。有些人在内联块元素上设置了约-4px的边距右边，这些元素应该并排堆叠其他人只会使用不同的显示类型，如table或flexbox。您也可以尝试将它们向左浮动并向它们添加clearfix hack。如果您仍然卡住和/或查看Chris Coyier关于这种困境的可靠帖子，请给我留言：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

你可能不会喜欢但可行的一种方法是：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

要解释我在这里做的事情：通过在前一个div关闭之后立即启动下一个div（即没有换行符os空格）我阻止浏览器添加不需要的空格＆＃39; （正如你所说，它不是一个＆＃39;保证金。好吧它是用英语写的，但不是CSS中的。）

Answer 3

在父级上设置font-size: 0并在font-size子级上设置所需的inline-block 是删除特征边距的标准方式内嵌元素（inline，inline-block或任何其他内嵌显示）之间的em>或空白。

见下面的演示：

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

另一种方法是使用评论来克服这个空白（当然这有点难以管理） - 请参阅下面的演示：

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 4

我在这里分享2个解决方案，这是我的工作

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

OR

2）您也可以使用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+ */
}

字体大小改变保证金，为什么？

4 个答案: