小さな画面のdiv間にスペースを作成

Question

私は小さな画面でdivの間にスペースを作るのに苦労しています。私はpadding-topを使用しようとしましたが、それは私のためには機能しませんでした。

これは私のCSSの

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3 col-xs-12"> 
      <div class="col-md-6 col-xs-12"> 
       <a href="" class="box"> 
        <img src="" class="img-card-content center-block img-responsive" style="width: 200px"/> 
       </a> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
       <a href="" class="box"> 
        <img src="" class="img-card-content center-block img-responsive" style="width: 200px"/> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 

私のhtmlページです：

.box { 
    padding: 40px; 
    display: block; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -o-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border: 1px solid #575757; 
} 

CSSの残りの部分は、ブートストラップからです。

誰にでも解決策がありますか？

Answer 1

ただ、これは以下の...助けを願っていますが、作業の抜粋である。この

@media only screen and (max-width:768px) { 
    .box { 
     margin-bottom: 10px; /* Or required space */ 
     display: block; 
    } 
} 

Answer 2

ために、以下のCSSを追加します。

.box { 
 
    padding: 40px; 
 
    display: block; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    -o-border-radius: 10px; 
 
    -ms-border-radius: 10px; 
 
    border: 1px solid #575757; 
 
} 
 

 
@media (max-width:768px){ 
 
.box { margin-bottom:15px; display:block;} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3 col-xs-12"> 
 
      <div class="col-md-6 col-xs-12"> 
 
       <a href="" class="box"> 
 
        <img src="https://dummyimage.com/600x400/000/fff" class="img-card-content center-block img-responsive" style="width: 200px"/> 
 
       </a> 
 
      </div> 
 
      <div class="col-md-6 col-xs-12"> 
 
       <a href="" class="box"> 
 
        <img src="https://dummyimage.com/600x400/000/fff" class="img-card-content center-block img-responsive" style="width: 200px"/> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

@superuserは正しいです彼はスペルミスを犯しました

@media (max-width:768px) { 
    .box { 
     margin-bottom: 10px; /* Or required space */ 
     display: block; 
    } 
}