div 没有正确定位边距答案

【问题标题】：Divs are not positioned correctly with margindiv 没有正确定位边距
【发布时间】：2014-08-04 16:19:37
【问题描述】：

我有一些自制的进度条。但是，出于某种原因，我的 div text_div 对于每个元素都向右移动了大约 2 个像素。我不明白是什么原因造成的，因为我将边距、填充和边框设置为 0。

对于令人困惑的描述，我很抱歉，但我认为当您自己看到它时，您就会清楚了。尝试将带边框的 div 的宽度更改为 100px、200px、300px。由于某种原因，每个 text_div 似乎都偏离了大约 2px。

.text_div
{
    display: inline-block;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    border: 0;
}

【问题讨论】：

标签： html css

【解决方案1】：

其实就是空格和display:inline-block的组合

请参阅此 JSFIDDLE 更新，我删除了关闭 div 之间的空格。

要解决此问题，您应该使用 float 和 clear 的组合

看这个例子：JSFIDDLE

CSS

.text_div
{
    float:left;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    border: 0;
}

.clearfix {
    clear:both
}

HTML

<div class="text_div" style="margin-left: 100px; width: 50px">asadsadfgdgf asdadaa sad
    <br>|</div>
<div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
    <br>|</div>
<div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
    <br>|</div>
<div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
    <br>|</div>
<div class="clearfix"></div>
<div style="height: 30px; width: 400px; border: 1px solid black;"></div>

【讨论】：

这个答案的唯一问题是垂直对齐不适用于浮动。任何想法如何解决这个问题？
我通过使用 display-inline 解决了这个问题，并为文本使用了元素。 text_div 有 font-size: 0 和 span font-size 12。
只是想为您解决问题 - 很高兴您解决了它 :-)

【解决方案2】：

Demo

一系列像您通常格式化 HTML 一样格式化的 inline-block 元素之间会有空格。

html

<div class="text_div" style="margin-left: 100px; width: 50px" >
    asadsadfgdgf asdadaa sad
    <br>
    |
</div><div class="text_div" style="margin-left: 50px; width: 50px" >
    asadsadsadas asdadaa sad
    <br>
    |
</div><div class="text_div" style="margin-left: 50px; width: 50px" >
    asadsadsadas asdadaa sad
    <br>
    |
</div><div class="text_div" style="margin-left: 50px; width: 50px" >
    asadsadsadas asdadaa sad
    <br>
    |
</div><div style="height: 30px; width: 400px; border: 1px solid black;">

</div>

Read here for more info

【讨论】：

【解决方案3】：

行内块显示元素存在一个已知问题。内联元素之间的空间，我们用来使我们的标记可读，在这种情况下被解释为真正的可见空间。有几种方法可以解决这个问题（看css-tricks post）

例如（我喜欢这个，因为它使标记保持可读性，但它是可讨论的）：

html

<div class="container">
    <div class="text_div" style="margin-left: 100px; width: 50px">asadsadfgdgf asdadaa sad
        <br>|</div>
    <div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
        <br>|</div>
    <div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
        <br>|</div>
    <div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
        <br>|</div>
</div>
<div style="height: 30px; width: 400px; border: 1px solid black;"></div>

css

.text_div {
    display: inline-block;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    border: 0;
    font-size:14px; //now you need to manualy set font-size for your blocks
}

.container {
    font-size: 0px; //this does that trick
}

【讨论】：

【解决方案4】：

使用display:inline-block; 时，您必须考虑空白。要解决这个问题，您可以使用 HTML cmets 转义空白区域或将元素彼此相邻放置。

选项 1：

<div style='display:inline-block;'>inline block</div><!--
--><div style='display:inline-block;'>inline block</div>

选项 2：

<div style='display:inline-block;'>
    inline block
</div><div style='display:inline-block;'>
    inline block
</div>

【讨论】：