CSS:为什么左边界需要额外的空间?

时间:2017-08-08 13:57:52

标签: html css

以下是我的网站:http://www.reshapefinancial.com/,当我应用左边框时,它会在右侧网站上创建一个空格。当您检查并删除左边框border-left: 1px solid white时,您会看到右边的空格消失。

enter image description here

4 个答案:

答案 0 :(得分:1)

请将相关代码添加到您的问题

之所以存在差距,是因为li被设置为display: inline-block。这意味着浏览器将它们视为单词,并且当它们之间存在空格时,浏览器将对其进行渲染。在您的情况下,空间来自换行符和用于在HTML中缩进的空格。

解决方案1(有点hacky)

直接解决此问题的一种解决方案是添加:

#top-menu{
    ...
    font-size: 0;
}

这实际上使浏览器放置的空间没有字体大小消失了。不完美,但它直接解决了问题。正如@ Kudla69在他的回答中指出的那样,这会破坏font-size继承,这也可能导致问题,这就是使这个特定黑客不是推荐路线的原因。

解决方案2 推荐

直接解决此问题的另一种方法是删除HTML中的空格。重构HTML以使其更像是。

<li> This is something
</li><li> This is something else
</li>

这将删除元素之间的空间,浏览器将基本上将它们视为没有空格的单词,并将它们相互对接。

解决方案3

最后,如果你对它很好,你也可以float: left li个元素。但是,在某些情况下,这可能会导致尺寸问题。这会将它们从流程中删除,因此浏览器不再像对待单词一样对待它们。

或者正如其他人所说的那样使用display: flex,有时可能会比inline-block略有不同,但这是一种更现代的方法。

答案 1 :(得分:1)

@Dons的回答很好地解释了潜在的问题。这是一个替代解决方案,使ul成为flexbox。这种方法更好用,因为你不必将字体大小设置为0,这会弄乱任何字体大小的继承。

#top-menu.nav {
 display: flex;
}

答案 2 :(得分:0)

请查看以下网址以获取白色间距的解决方案

display: inline-block leaves gap with respect to height after div element 这是你的解决方案

在li

添加func animateToProfile(using transitionContext: UIViewControllerContextTransitioning) { guard let fromVC = transitionContext.viewController(forKey: .from)?.childViewControllers.first, let toVC = transitionContext.viewController(forKey: .to)?.childViewControllers.first as? ProfileViewController, let superviewToAdd = toVC.parent?.view else { return } print("\(toVC.view.frame)") let sideMenuOriginX = UIScreen.main.bounds.width * (98 / 414) toVC.sideMenuView.frame.origin.x = toVC.view.frame.width toVC.visualEffectView.alpha = 0 transitionContext.containerView.addSubview(superviewToAdd) let duration = transitionDuration(using: transitionContext) UIView.animate(withDuration: duration, delay: 0, options: [.curveEaseInOut], animations: { toVC.sideMenuView.frame.origin.x = sideMenuOriginX toVC.visualEffectView.alpha = 1 }, completion: { _ in transitionContext.completeTransition(!transitionContext.transitionWasCancelled) }) }
float:left

答案 3 :(得分:0)

在对OP的评论中,@ Marvin指出了问题的根本原因(并链接到主题where it's already answered):这是因为内联块项目之间的空格字符。内联块元素属于内联格式化上下文,就像例如文本的单词和它们之间的任何空格字符在文本中充当空白字符,即作为字间间隔。这不是一个错误。这就是display:inline-block应该按标准工作的方式。

设置边框不会导致那个间距,只是让它可见。

tons of ways可以解决这个问题。仅举几例:

  • 否定margin-left。缺点:您需要知道确切的宽度 一个空白字符,它取决于字体设置等。
  • 否定word-spacingletter-spacing(甚至两者,如旧YUI解决方案中所示)。缺点:与上述相同+浏览器对负差距的处理方式不同,有些允许项目重叠,有些则不允许。
  • 删除上一个项目的结束标记与下一个项目的开始标记之间的空格。缺点:需要控制标记,并不总是与模板引擎兼容,会降低代码的可读性。
  • 使用HTML评论(<!-- -->)注释掉这些标记之间的空格。缺点:与上述相同,这些评论的冗余DOM节点。
  • font-size: 0;表示容器。缺点:你不能再以em为单位设置项目的字体大小,在旧的Android浏览器中有效。
  • 省略</li>结束标记。它在HTML5中有效(并且在HTML中始终有效,但在XHTML中无效),这样做会使浏览器在下一个<li>开始标记之前隐式关闭它们,在它们之间不留空格。缺点:仅适用于有限的一组标签,并不总是易于阅读,可能会导致代码编辑器出现问题(例如语法高亮显示)。
  • 使用自定义字体作为空格字符宽度为零的容器。缺点:对该字体的额外HTTP请求(或嵌入的额外字节)在Opera Mini等旧/代理浏览器中不起作用。
  • 使用浮点数而不是内联块。缺点:有效地消除了内联块的所有影响(包括它们的优点,如水平和垂直对齐选项),需要“清除”容器。
  • 对容器使用display:table,对项目使用display:table-cell而不是内联块。缺点:不能换行到新行,项目不能有不同的高度,需要不同的样式方法(例如border-spacing而不是margin来控制间距(如果需要)。

此列表未完成。这些方法都不是完美的,因为它们中的大多数基本都是黑客。

然而,我深信任何问题的最佳解决方案是使用不会导致该问题的适当工具。在这种情况下,有这样的工具:Flexbox。它具有与内联块(以及更多!)相同的对齐功能,它不需要“clearfixing”,它可以在必要时换行到新行,并且它当前是supported in almost all browsers。并且默认情况下它不会在项目之间留下任何空格。

实际上,您只需将display:flex添加到容器中,而在现代浏览器中,不需要的空间会自动消失。而且您现有的内联块解决方案仍然适用于非常老的浏览器,提供了不错的回退。