保證金右瀏覽器

感謝大家，我是意大利人，對不起我的英語，我想澄清：保證金右瀏覽器

爲什麼不是所有的瀏覽器裏看到margin-right，而開發工具有margin-right？（除了margin-right，Firefox不顯示margin-bottom）。

CSS

html 
{ 
background-color:gold; 
width: 100%; 
height: 100%; 
padding: 6px; 
border: solid black 10px; 
margin-top: 10px; 
margin-right: 50px; 
margin-bottom: 10px; 
margin-left: 20px; 
}

在盒模型我有margin-right，在瀏覽器，它不考慮。

Chrome瀏覽器和開發工具盒模型：

來源

2017-09-02 fabaxl

截圖並未顯示所有內容 –

您的問題尚不清楚。你能嘲笑你如何期待它的外觀和實際外觀的截圖嗎？ –

我同意@Mr李斯特，這個問題還不清楚。如果您的元素已經是視口的100％，並且有邊距，則總計框將爲100％+複合邊距。因此，元素的右側將超出視口。在你的例子中，總框寬度將是100％+ 70px。雖然不太確定這是個問題。 – jfeferman

你應該脫下從你的CSS寬度。由於您使用的是保證金，因此您已經告訴瀏覽器只顯示您允許的空間。它不影響高度，高度幾乎是無限的。

所以，你應該有這樣的事情

html 
{ 
background-color:gold; 
height: 100%; 
padding: 6px; 
border: solid black 10px; 
margin-top: 10px; 
margin-right: 50px; 
margin-bottom: 10px; 
margin-left: 20px; 
}

來源

2017-09-02 14:45:46 mw509

瀏覽器並不總是處理所有的CSS屬性的HTML元素一致，因爲它沒有父。如果我理解你想要正確的東西，我建議這一點，如果你想避免包裝的div，但它可能是一個有點不穩定：

* { 
    box-sizing: border-box 
} 

html { 
    background-color:gold; 
    width: 100%; 
    height: 100%; 
    padding: 10px 50px 10px 20px; 
    margin: 0; 
} 

body { 
    width: 100%; 
    height: 100%; 
    padding: 6px; 
    border: solid black 10px; 
    margin: 0; 
}

看到這個working example

或者您可以使用包裝股利和避免做任何比它正常化其他HTML標記（這是我會建議）：

<html> 
<body> 
    <div class="main"> 
     <!-- All your content --> 
    </div> 
</body> 
</html> 

* { 
    box-sizing: border-box 
} 

html, body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

body{ 
    background-color:gold; 
    padding: 10px 50px 10px 20px; 
} 

div.main { 
    width: 100%; 
    height: 100%; 
    padding: 6px; 
    border: solid black 10px; 
    margin: 0; 
}

由於shown here

來源

2017-09-02 16:03:46 LightBender

嚴格來說，技術上並沒有什麼特別的東西可以引起這個問題，而是關心如何在沒有父母的情況下添加樣式。保證金是最值得注意的保證金，但任何引用父元素的CSS屬性都可能會變得糟糕透頂，因爲規範中通常沒有定義應該如何處理這種情況，而將其留給開發人員的破壞。這就是爲什麼保證金左邊和保證金右邊通常效果不好，底邊保證金被碰撞和漏掉，而頂邊保證金只能保持一致，因爲保證金崩潰規則。 – LightBender

@MrLister回想起來，這句話確實聽起來比預期更有見地和強烈，我已經編輯了答案，希望更清楚。 – LightBender

您的盒子是over-constrained

CSS 2.2說：

'緣左' + '左邊框寬度' + '填充左' + '寬' + '填充右' +'右邊框寬度」 +‘保證金右’包含塊

的=寬度如果上述所有的具有比其它計算值‘自動’時，值被說成是‘過度約束’和一個使用的值必須與其計算值不同。如果包含塊的'方向' 屬性的值爲'ltr'，則將忽略'margin-right'的指定值，並計算該值，以使等於true。如果'方向'的值是'rtl'，那麼這個恰好是'margin-left'。

從這裏，你可以看到，瀏覽器會自動調整右頁邊距，重寫設置你給它。

來源

2017-09-02 17:04:45 Alohci

謝謝，我終於明白了。你一直很精確。 – fabaxl

保證金右瀏覽器

回答

相關問題