CSS3：如何刪除柔性容器周圍的白色邊框？

繼W3Schools的用於柔性容器的例子中，有以下示例： http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flexline CSS3：如何刪除柔性容器周圍的白色邊框？

.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 400px; 
 
    height: 100%; 
 
    background-color: lightgrey; 
 
} 
 
.flex-item { 
 
    background-color: cornflowerblue; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">flex item 1</div> 
 
    <div class="flex-item">flex item 2</div> 
 
    <div class="flex-item">flex item 3</div> 
 
</div>

我已附加的結果作爲圖像。該圖像顯示瀏覽器邊緣和柔性容器之間的白色邊框。

如何刪除白色邊框？

來源

2016-11-18 Peter

這不是一個白色邊框，它只是HTML體。您的柔性容器不是完整的寬度。 – TheValyreanGroup

默認情況下，用戶代理樣式表對'body'元素應用'margin'，通常爲'8px'。你可以通過使用'body {margin：0; }'。 – Ricky

@Ricky：太好了！ - 我已經添加了'body {margin：0; }進入CSS-File的頂部，白色的「邊框」消失了。我不知道默認的用戶代理樣式表是8px。我想評價你的答案有幫助。 – Peter

嘗試添加CSS規則的容器：

.flex-container { 
    margin: 0 !important; 
}

或者讓你的Flex容器全寬。例如像這樣：

min-width: 100vw;

它是一個很好的做法在你的CSS頂部的所有paddings和margins復位：

* { 
    margin: 0 !important; 
    padding: 0 !important; 
}

這將防止問題的發生，如本

來源

2016-11-18 19:06:07

它解決了問題嗎？ –

You拼寫錯誤_padding_ – TheValyreanGroup

@TheValyreanGroup，謝謝，我已更正） –

您所看到的邊框是html默認瀏覽器邊距。這是一個很好的做法，可以將所有margin和padding元素：

* { //* is known by wildcard, it selects all elements on the DOM 
    margin: 0; 
    padding: 0; 
}

並請始終避免對你的CSS !important，這是一個非常糟糕的做法，這使得難以重用/維護你的代碼。

來源

2016-11-18 20:00:37

如果問題是由於缺乏對身體的瀏覽器復位的，我通常會添加以下到我的網站/應用：https://jsfiddle.net/j66gcfcj/

這樣：

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

的解決方案的jsfiddle您的瀏覽器重置的一部分，你可以使用：

* { margin: 0; padding: 0; }

上面很容易解決您的問題，但會影響到你的網站的一切。我通常使用上述通配符實際應用box-sizing: border-box;爲：

*, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    }

如果你不想影響你已經工作的網站，並希望嚴格注重柔性容器上，然後用以下內容：

.flex-container { 
    margin: 0; 
    }

你也可以做的一切通配符選擇你的Flex容器內：

.flex-container * { 
    margin: 0; 
    }

，說要申請margin: 0到這兩個彎曲的容器以及裏面的東西吧：

.flex-container, 
.flex-container * { 
    margin: 0; 
    }

您可以通過了解更多有關瀏覽器重新設置爲：

http://meyerweb.com/eric/tools/css/reset/

來源

2016-11-18 20:56:28 Pegues

CSS3：如何刪除柔性容器周圍的白色邊框？

回答

相關問題