Question

非常简单，即时尝试制作条形图。我有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;
}

Answer 1

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

选中此demo

Answer 2

您可能会考虑使用内联块元素的浮点数。内联块元素之间的距离总是难以控制，特别是如果你使用％。

您可以在此处详细了解此（以及可能的解决方案）：

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?

Answer 3

这是因为您正在使用display: inline-block;如果您的HTML中有空白区域，则会在前端获得空白区域。删除HTML中的空白区域。

实施例： http://jsfiddle.net/7vdLV/23/

图表上的额外css填充或边距

3 个答案: