CSS3：フレックスコンテナの周りの白い枠線を削除するには？

Question

フレックスコンテナのW3Schoolsの上の例に続いて、次の例があります： http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flexline

.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>

は、私がイメージとしては、結果を添付しました。画像には、ブラウザの端とフレックスコンテナの間に白い境界線が表示されます。

白い枠線を削除するにはどうすればよいですか？

Answer 1

コンテナのCSSルールを追加してください：

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

またはあなたのフレックスコンテナ全幅を作ります。このような例：

min-width: 100vw; 

そして、それはあなたのCSSの上部にあるすべてのpaddingsとmarginsをリセットすることをお勧めします：

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

これは、この

Answer 2

などの問題の発生を防ぐことができます

あなたが見ているボーダーは、htmlのデフォルトブラウザマージンです。これは、すべてのマージンとパディングの要素をリセットするために良い習慣です：

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

そして常に、あなたのCSSの!importantを避けることは本当に悪い習慣だと、それはあなたのコードを維持/再利用が困難になりますしてください。

Answer 3

問題が原因ボディのブラウザリセットの欠如にある場合は、私は通常私のサイト/アプリケーションに次の行を追加します。ソリューションの

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

JSFiddle：としてhttps://jsfiddle.net/j66gcfcj/

* { 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-container * { 
    margin: 0; 
    } 

そして、あなたはを適用したいと言います

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

あなたがに行くことによって、ブラウザのリセットについての詳細を学ぶことができます：あなたのフレックスコンテナだけでなく、その内部のすべてのものの両方へ白のボーダーではありません

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