CSS保证金问题

编辑：我的问题不清楚，所以这只是澄清。CSS保证金问题

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>

出于某种原因，当我添加20像素缘至因为某些原因，它不仅会将所有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中测试过它，并且它完美地工作。

来源

2011-01-31 oshirowanen

这看起来有点像双浮动保证金错误的怪异表现。将display: inline放入您的第一个div的style属性内将会停止旧版IE浏览器边距翻倍。

然而，正如其他人所说，我创建类。它让事情更加整洁。

来源

2011-01-31 17:17:57

您似乎并不理解边距是如何工作的。当您向文本文档（如MS Word中）添加左边距时，您将纸张内容向右移动一个边距，从而将其与页面边缘分开。

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

而且，它可能只是一个转录问题，但你添加20倍像素的利润率在第一div的底部，不给左像你提到的。

来源

2011-01-31 14:26:11 coreyward

我认为这是一个Internet Explorer 7的bug或Internet Explorer 8中的Internet Explorer 7模式中的一个错误。当我向div标签应用20px的左边距时，div标签随专家一起移动，但它将移动输入控件div框右侧20px。所以基本上，div总共移动了20px，并且输入控件总共移动了40px ... – oshirowanen 2011-01-31 14:36:17

@oshirowanen - 如果不是像coreyward所暗示的误解，那么这可能是一个bug。你有没有在任何现代浏览器中测试过？ – Rob 2011-01-31 15:05:13

CSS保证金问题

回答

相关问题