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保證金問題

回答

相關問題