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

Posted 2023-03-06

技术标签:

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

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

http://jsfiddle.net/7vdLV/4/

* 
    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% 【参考方案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?

【讨论】：