width - 显示 : Inline block - What is that space?

标签 width css

<分区>

行内 block 之间有这个奇怪的空间。我可以忍受它,如果我使用 AJAX 调用加载更多内容,那么小空间就会消失。我知道我在这里遗漏了一些东西。

div {
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0; 
    display: inline-block;
}

http://jsfiddle.net/AWMMT/

如何使Inline block 中的间距保持一致?

最佳答案

空格在 HTML 中。有几种可能的解决方案。从最好到最差:

  1. 删除 HTML 中的实际空间(理想情况下,您的服务器可以在提供文件时为您执行此操作,或者至少您的输入模板可以适本地间隔)http://jsfiddle.net/AWMMT/2/
  2. 使用float: left 代替display: inline-block,但这对高度有不良影响:http://jsfiddle.net/AWMMT/3/
  3. 将容器的font-size设置为0并为内部元素设置合适的font-size:http://jsfiddle.net/AWMMT/4/ -- 这很简单,但是你不能利用内部元素的相对字体大小规则(百分比,em)

关于width - 显示 : Inline block - What is that space?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16678929/

相关文章:

html - <html> 宽度小于其背景

css - 如何更改 col-xs Bootstrap 的宽度?

css - 无法使用 actioncolumn 和 iconCls 从字体库呈现图标

javascript - 如何在使用 slideToggle() 显示/隐藏后更改 div 样式

css - Chrome DevTools 中的用户样式表来自哪里?

css - 无法在 Wordpress 中更改大于 640px 的图像的显示大小?

html - 无法格式化苹果网站的 "clone"

jquery - YouTube 自定义嵌入大小调整器

r - ggplot2:如何在 coord_flip 和面板边框之后减少窄条之间的空间

jquery - 在 Bootstrap 汉堡包按钮内垂直居中文本