图上的额外css填充或边距[重复]答案

【问题标题】：Extra css padding or margin on graph [duplicate]图上的额外css填充或边距[重复]
【发布时间】：2014-05-15 04:43:48
【问题描述】：

真的很简单，我正在尝试制作条形图。除了第一个和最后一个之外，我有 10 个宽度为 6.2% 且两侧填充为 2% 的项目。这应该等于 100% 位，它仍然将最后一个推到边缘，我做错了什么？

* {
    padding: 0px;
    margin: 0px;
}
.graph {
    width: 100%;
    height: 50px;
    background-color: #eaeaea;
}
.weekbar {
    width: 6.4%;
    margin-left: 2%;
    margin-right: 2%;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}
.start {
    margin-left: 0px;
}
.end {
    margin-right: 0px;
}

【问题讨论】：

这对我不起作用@davidkonrad
是的，对不起 - 我不知道为什么它看起来不错，但取决于宽度 - 它给出的小于 100%

标签： html css

【解决方案1】：

问题是您正在使用display: inline-block; 到.weekbar，这会增加块之间的间隙。这是默认操作。要消除差距，请将font-size:0; 添加到.graph

查看demo

【讨论】：

【解决方案2】：

您可能会考虑使用 float 代替 inline-block 元素。内联块元素之间总会有一个难以控制的距离，尤其是在使用 % 时。

您可以在此处阅读有关此（以及可能的解决方案）的更多信息：

The gap between two inline-block <span> element

How do I remove extra margin space generated by inline blocks?

How to remove the space between inline-block elements?

【讨论】：

【解决方案3】：

这是因为您使用的是display: inline-block; 如果您的 HTML 中有空格，那么您的前端也会有空格。删除 HTML 中的空格。

示例： http://jsfiddle.net/7vdLV/23/

【讨论】：