Question

编辑：我的问题不明确，所以这只是为了澄清。

20px左边距移动div总共20px，但输入控件似乎总共移动了40px。

原始问题：

以下脚本是整个脚本，我没有附加到下面脚本的其他脚本/样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text"/>
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
    </body>
</html>

出于某种原因，当我在任何这些div标签的左侧添加20px边距时，由于某种原因，它不仅将所有div 20px向右移动，而且还移动div标签内的输入字段20px div标签右侧。

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 20px;border:1px black solid;">
            <input type="text"/>
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
    </body>
</html>

为什么会这样？

我正在使用Internet Explorer 7模式在Internet Explorer 8中进行测试。我已经在Internet Explorer 8中使用标准的Internet Explorer 8模式测试了它，它运行得很好。

Answer 1

这看起来像双浮动边缘错误的奇怪表现。将display: inline置于您的第一个style的{{1}}属性中将停止旧版IE中边距加倍。

然而，正如其他人所说，我会创建课程。它让事情变得更加整洁。

Answer 2

您似乎并不了解保证金的运作方式。向文本文档添加左边距（如在MS Word中）时，将纸张内容向右移动边距，从而将其与页面边缘隔开。

在CSS中为元素添加左边距时，您可以执行相同的基本操作。您告诉浏览器确保它从块级元素到左侧有n个空格，无论是页面的边缘还是另一个div。您添加保证金的元素的所有内容都保留其相对于父母的位置;在你的情况下，这意味着当input移动时div移动。

此外，它可能只是一个转录问题，但您在第一个div的底部上添加了20px的边距，而不是像你一样在左边提及。

CSS保证金问题

2 个答案: