부트스트랩에서 margin-top 은 어떻게 표현할까?

<div class="row">
   <div class="col-xs-12 col-md-12">
      <div class="alert alert-success" role="alert">
         회원님의 아이디는 <span class="findid"></span>입니다.
      </div>
   </div>
</div>

예를 들어, 위와 같이 row 와 col-md-xx 를 같이 사용한 div 박스가 두개 연달아 나타날 경우,

아래 div 박스를 상단 div 박스와 10픽셀 간격을 두려고 한다. 과연 이 margin-top (혹은 padding-top, margin-bottom 어쨌든) 을 어떻게 나타내줘야 할까요?

bootstrap에는 기본적으로 이런 margin-top 간격을 표시하는 클래스는 없는 것 같습니다.

이 vertical spacing 을 표현하는 방법은 외국에서도 이슈가 되는 것 같은데요 (https://github.com/twbs/bootstrap/issues/4286)

아래 url 에서는 다양한 방법으로 개인적으로 임의 추가해서 사용하고 있네요.

1) 

.top-buffer { margin-top:20px; }

2) top10

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

3) margin-bottom-xs

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

4) voffset**

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

5) margin-top-10

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

음.. 저는 개인적으로 4)번째 방법이 마음에 드네요. 기존 부트스트랩의 col-md-offset-xx 개념을 vertical 접두어를 붙여 voffset**이라고 표현한 방법이 센스있는 것 같습니다.

ps. 개인적으로 저는 대충 이렇게 사용했었습니다. ;;

.mb40{margin-bottom:40px;}
.mr80{margin-right:90px;}
.pv40{padding:40px 0;}
.padding0{padding:0;}