パテントグリッドのレイアウト - ボーダー/パディングとオーバーレイの問題

Question

私はmetafizzy同位体パケモードを使用してグリッドレイアウトに取り組んでおり、私の問題を示すために以下のコードを設定しました。

http://codepen.io/anon/pen/EgKdpL

私は2つの問題を除いて、私のグリッドとほぼ満足しています。

1 - すべてのグリッドアイテムの周りに単純に白いエッジを適用すると予想されるメイングリッドセレクタクラス "griditem"にパッドを適用しました。しかし、結果は混在し、いくつかのギャップは他のものよりも小さく/大きくなっています。私はCSSの枠線を使って同じことを作り出そうとしましたが、同じ問題がありました。

.grid-sizer, 
.grid-item { 
    margin: 0!important; 
    padding: 10px!important; 
} 

2 - そこタイトル/見出しを明らかにし、各グリッド項目のオーバーレイは、その後ですが、原因パディングにオーバーレイがオフに実行されます。この出来事を停止する方法はありますか？

http://codepen.io/anon/pen/EgKdpL

任意の助けに感謝。

UPDATEが持っているがcodepenに下側からの回答を適用し、ロールオーバー状態が修正と細かいです。あなたが見ることができるように、不均一なボーダー/パディングは残っています。最初の青いボックスに。

Answer 1

これは私の仕事：

をあなたのCSSコードの上部には、*セレクタブロックINT、これを追加します。

margin: 0; 
padding: 0 

スペースの問題は、ほとんどのブラウザが追加に問題があります余分なマージンなど、このような単純なCSSのリセットはそれを処理する必要があります。詳細はEric Meyer's CSS resetを参照してください。

Answer 2

1. あなたの体/ htmlタグの上にある余白を削除します。

   html, body { 
       margin: 0; 
       padding: 0; 
   } 
   

2. #wrapper .text-overlayはそれに100％の幅と高さを使用しています。絶対配置を使用しているので、上部、下部、左、右のプロパティを代わりに使用できます。これを試してください：あなたのコメントについて

   #wrapper .text-overlay { 
       position: absolute; 
       visibility: hidden; 
       background-color: RGBA(40, 44, 52, 0.9); 
       font-family: 'Old Standard TT', serif; 
       letter-spacing: 0.5px; 
       display: block; 
       margin: 0 auto; 
       top: 10px; 
       left: 10px; 
       right: 10px; 
       bottom: 10px; 
       color: #fff; 
   }