グリッドを壊すことなくマージンを得る

Question

グリッドを12列にして、テストした瞬間に（6と6列）、ページの境界線とテキストの間に余白がないことがわかりました。私は2つの列が並んでいないし、お互いの下に来る余白を追加する瞬間。どうすればこの問題を解決できますか？

*{ 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 
body{ 
 
    width: 100%; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
} 
 
.wrap{ 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    height:38.45px; 
 
    background-color: #053367; 
 
    border-bottom: 1px solid black; 
 
} 
 
/* position of the navbar */ 
 
.navbar{ 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
    width: 100%; 
 
} 
 
/* decoration of navbar buttons, center the text, put inline, width of each button, ... */ 
 
.navbar li{ 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 120px; 
 
    padding: 10px 0px; 
 
    float: left; 
 
    color: white; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    text-transform: Uppercase; 
 
} 
 
/* Styling of the links in the navbar */ 
 
.navbar li a{ 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
/* padding so the dropdown menu get underneath the navbar */ 
 
.navbar li ul{ 
 
    padding-top: 10px; 
 
} 
 
/* hover transition for the links */ 
 
.drop-content li:hover{ 
 
    transition-property: background-color; 
 
    transition-delay: 0.1s; 
 
    transition-duration: 0.5s; 
 
    background-color: #009900; 
 
    height: auto; 
 
} 
 
/* styling of the dropdown content box */ 
 
.drop-content li{ 
 
    text-align: left; 
 
    background-color: white; 
 
    color: black; 
 
    padding: 10px; 
 
    margin: 0; 
 
    box-shadow: 0px 1px 0px 1px hsl(0, 0%, 15%); 
 
} 
 
/* give active page a color */ 
 
.active{ 
 
    background-color: #009900; 
 
} 
 
/* dropdown menu box positioning */ 
 
.drop-content{ 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    display: none; 
 
    text-align: left; 
 
} 
 
/* drop the menu on hover */ 
 
.navbar li:hover .drop-content{ 
 
    display: block; 
 
} 
 
footer{ 
 
    background-color: #003566; 
 
    height: 15em; 
 
} 
 
/* Grid */ 
 
.row{ 
 
    font-size: 0px 
 
} 
 
/* display the col- inline */ 
 
.row:before, 
 
.row:after{ 
 
    content: ""; 
 
    clear: both; 
 
    display: inline; 
 
} 
 
/* styling of the col- */ 
 
[class*='col-']{ 
 
    float: left; 
 
    font-size: 16px; 
 
    padding-right: 5px; 
 
    max-width: 1200px; 
 
    min-height: 1px; 
 
    margin-left: 10px; 
 
    text-align: center; 
 
} 
 
/* added padding not applying to last element */ 
 
[class*='col-']:last-of-type{ 
 
    padding-right: 0; 
 
} 
 
/* container for the grid, will not exceed max width */ 
 
.grid-container{ 
 
    max-width: 100%; 
 
} 
 
/* padding around the col-*/ 
 
.row-pad{ 
 
    padding: 10px 10px 10px 10px; 
 
} 
 
/* defining the colums */ 
 
.col-1{width: 8.33%;} 
 
.col-2{width: 16.66%;} 
 
.col-3{width: 25%;} 
 
.col-4{width: 33.3%;} 
 
.col-5{width: 41.66%;} 
 
.col-6{width: 50%;} 
 
.col-7{width: 58.33%;} 
 
.col-8{width: 66.66%;} 
 
.col-9{width: 75%;} 
 
.col-10{width: 83.33%;} 
 
.col-11{width: 91.66%;} 
 
.col-12{width: 100%;} 
 

 
.well{ 
 
    text-align: left; 
 
    background-color: #e0e0eb; 
 
    border: 1px solid #e1e1ec; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
}

<nav> 
 
     <div class="wrap"> 
 
      <ul class="navbar"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li>Link 1 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 2 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 3 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 4</li> 
 
       <li>Link 5</li> 
 
       <li>Link 6</li> 
 
       <li><a href="#">Link 7</a></li> 
 
       <li><a href="#">Link 8</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <div class="row"> 
 
     <article> 
 
      <div class="col-6"> 
 
       <p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis, 
 
       a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus 
 
       orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis 
 
       velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt 
 
       enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin 
 
       lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula, 
 
       euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae 
 
       orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis, 
 
       hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam 
 
       at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est. 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis, 
 
       a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus 
 
       orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis 
 
       velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt 
 
       enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin 
 
       lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula, 
 
       euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae 
 
       orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis, 
 
       hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam 
 
       at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p> 
 
      </div> 
 
      <div class="col-6"> 
 
       <p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis, 
 
       a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus 
 
       orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis 
 
       velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt 
 
       enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin 
 
       lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula, 
 
       euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae 
 
       orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis, 
 
       hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam 
 
       at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est. 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis, 
 
       a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus 
 
       orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis 
 
       velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt 
 
       enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin 
 
       lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula, 
 
       euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae 
 
       orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis, 
 
       hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam 
 
       at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p> 
 
      </div> 
 
     </article> 
 
    </div>

Answer 1

あなたは[class*='col-']からmargin-leftを削除する必要がありますし、ここに.row

.row{ 
    font-size: 0px; 
    padding:0 10px; 
} 

デモにパディング権を与えると左ことができます。https://jsfiddle.net/IA7medd/pou8gxj6/

別ソリューション：あなたができます最新のブラウザで動作するclac（）関数を使うIKEこと：

.col-6{ 
    width: calc(50% - 10px) 
} 

がここカルクの詳細を参照してください。それはに並ぶwoudように0.5パーセント：0.5パーセントとマージン右：情報のためhttp://www.w3schools.com/cssref/func_calc.asp

Answer 2

あなたはボックスモデルを検討すべきです。実際に、幅の50％のエレンが2つある場合、マージンに10pxを追加する余分な領域はありません（1pxはありません）。 例： this：.col-6 {width：49％;} [class * = 'col-']の中で、これは：margin-left：1％;

*{ 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 
body{ 
 
    width: 100%; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
} 
 
.wrap{ 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    height:38.45px; 
 
    background-color: #053367; 
 
    border-bottom: 1px solid black; 
 
} 
 
/* position of the navbar */ 
 
.navbar{ 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
    width: 100%; 
 
} 
 
/* decoration of navbar buttons, center the text, put inline, width of each button, ... */ 
 
.navbar li{ 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 120px; 
 
    padding: 10px 0px; 
 
    float: left; 
 
    color: white; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    text-transform: Uppercase; 
 
} 
 
/* Styling of the links in the navbar */ 
 
.navbar li a{ 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
/* padding so the dropdown menu get underneath the navbar */ 
 
.navbar li ul{ 
 
    padding-top: 10px; 
 
} 
 
/* hover transition for the links */ 
 
.drop-content li:hover{ 
 
    transition-property: background-color; 
 
    transition-delay: 0.1s; 
 
    transition-duration: 0.5s; 
 
    background-color: #009900; 
 
    height: auto; 
 
} 
 
/* styling of the dropdown content box */ 
 
.drop-content li{ 
 
    text-align: left; 
 
    background-color: white; 
 
    color: black; 
 
    padding: 10px; 
 
    margin: 0; 
 
    box-shadow: 0px 1px 0px 1px hsl(0, 0%, 15%); 
 
} 
 
/* give active page a color */ 
 
.active{ 
 
    background-color: #009900; 
 
} 
 
/* dropdown menu box positioning */ 
 
.drop-content{ 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    display: none; 
 
    text-align: left; 
 
} 
 
/* drop the menu on hover */ 
 
.navbar li:hover .drop-content{ 
 
    display: block; 
 
} 
 
footer{ 
 
    background-color: #003566; 
 
    height: 15em; 
 
} 
 
/* Grid */ 
 
.row{ 
 
    font-size: 0px 
 
} 
 
/* display the col- inline */ 
 
.row:before, 
 
.row:after{ 
 
    content: ""; 
 
    clear: both; 
 
    display: inline; 
 
} 
 
/* styling of the col- */ 
 
[class*='col-']{ 
 
    float: left; 
 
    font-size: 16px; 
 
    padding-right: 5px; 
 
    max-width: 1200px; 
 
    min-height: 1px; 
 
    margin-left: 1%; 
 
    text-align: center; 
 
} 
 
/* added padding not applying to last element */ 
 
[class*='col-']:last-of-type{ 
 
    padding-right: 0; 
 
} 
 
/* container for the grid, will not exceed max width */ 
 
.grid-container{ 
 
    max-width: 100%; 
 
} 
 
/* padding around the col-*/ 
 
.row-pad{ 
 
    padding: 10px 10px 10px 10px; 
 
} 
 
/* defining the colums */ 
 
.col-1{width: 8.33%;} 
 
.col-2{width: 16.66%;} 
 
.col-3{width: 25%;} 
 
.col-4{width: 33.3%;} 
 
.col-5{width: 41.66%;} 
 
.col-6{width: 49%;} 
 
.col-7{width: 58.33%;} 
 
.col-8{width: 66.66%;} 
 
.col-9{width: 75%;} 
 
.col-10{width: 83.33%;} 
 
.col-11{width: 91.66%;} 
 
.col-12{width: 100%;} 
 

 
.well{ 
 
    text-align: left; 
 
    background-color: #e0e0eb; 
 
    border: 1px solid #e1e1ec; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
}

<nav> 
 
     <div class="wrap"> 
 
      <ul class="navbar"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li>Link 1 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 2 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 3 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 4</li> 
 
       <li>Link 5</li> 
 
       <li>Link 6</li> 
 
       <li><a href="#">Link 7</a></li> 
 
       <li><a href="#">Link 8</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <div class="row"> 
 
     <article> 
 
      <div class="col-6"> 
 
       <p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis, 
 
       a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus 
 
       orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis 
 
       velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt 
 
       enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin 
 
       lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula, 
 
       euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae 
 
       orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis, 
 
       hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam 
 
       at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est. 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis, 
 
       a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus 
 
       orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis 
 
       velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt 
 
       enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin 
 
       lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula, 
 
       euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae 
 
       orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis, 
 
       hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam 
 
       at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p> 
 
      </div> 
 
      <div class="col-6"> 
 
       <p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis, 
 
       a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus 
 
       orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis 
 
       velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt 
 
       enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin 
 
       lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula, 
 
       euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae 
 
       orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis, 
 
       hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam 
 
       at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est. 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis, 
 
       a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus 
 
       orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis 
 
       velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt 
 
       enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin 
 
       lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula, 
 
       euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae 
 
       orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis, 
 
       hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam 
 
       at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p> 
 
      </div> 
 
     </article> 
 
    </div>