Как дать разрыв строки между кнопками в css/html?

Question

У меня есть серия из двух кнопок, расположенных в вертикальном порядке. Графическое представление этого является:

HTML, принадлежащий к кнопкам:

<ul class="child"> 
         <!-- ko foreach: subTabs --> 
         <li class="color-dark child active" data-bind="css: {active: $data.selected()}, click: select"> 
          <span data-bind="text: i18n($data.title) ">Current coverage</span> 
         </li> 

         <li class="color-dark child" data-bind="css: {active: $data.selected()}, click: select"> 
          <span data-bind="text: i18n($data.title) ">Coverage history</span> 
         </li> 
         <!-- /ko --> 
        </ul> 

код CSS, который я использую для комбинированных кнопок:

@media screen and (max-width: 767px) and (min-width: 320px) 
    div.default.tabs ul.child:first-child { 
     background-color: #6f7992; 
     display: flex; 
     justify-content: center; 
     flex-direction: column; 
     margin-left: 20px; 
     width: auto; 
    } 

    div.default.tabs ul.child:first-child { 
     background-color: #6f7992; 
     display: table; 
     width: auto; 
    } 
    .default.tabs ul.child:first-child { 
     margin: 0px 20px 2px 0; 
     padding: 0; 
     width: auto; 
    } 

Код CSS, который я использую для t он индивидуальная кнопка:

@media screen and (max-width: 767px) and (min-width: 320px) 
    div.default.tabs ul.child:first-child li.child.active { 
     color: #0b710c !important; 
     background-color: #658B01 !important; 
    } 
    div.default.tabs ul.child:first-child li.child.active { 
     color: #0b710c !important; 
     background-color: #dbefb1 !important; 
    } 
    .benefits.header .inner.current span, .default.tabs ul.child:first-child li.child.active { 
     font-weight: bold; 
     color: #0074ff; 
    } 
    .default.tabs ul.child:first-child li.child.active { 
     background: url(img/tabs-arrow.png) no-repeat bottom center; 
     padding-top: 14px; 
     padding-bottom: 15px; 
     border: 0; 
    } 
    @media screen and (max-width: 767px) and (min-width: 320px) 
    .default.tabs ul.child:first-child li.child, .default.tabs ul.child:first-child li.child.active { 
     border-left: 0px !important; 
     display: table-cell; 
     position: relative; 
    } 
    .default.tabs ul.child:first-child li.child, .default.tabs ul.child:first-child li.child.active { 
     border-left: 3px solid #fff !important; 
     display: table-cell; 
     position: relative; 
    } 
    .default.tabs ul.child:first-child li.child.active { 
     background: url() !important; 
    } 
    .default.tabs ul.child:first-child li.active.child { 
     padding-left: 3px; 
     padding-right: 3px; 
    } 
    .default.tabs ul.child:first-child li.child { 
     padding: 14px 0; 
     list-style-type: none; 
     display: table-cell; 
     color: #182e5b; 
     font-size: 16px; 
     min-width: 160px; 
     text-align: center; 
     cursor: pointer; 
     -webkit-touch-callout: none; 
     -webkit-user-select: none; 
     -khtml-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
} 

Моя задача состоит в том, чтобы дать разрыв строки в между двумя кнопками следующим образом:

Я попытался изменить значение свойства отображения но все же я не могу создать разрыв строки между кнопками.

Answer 1

Добавить маржинального дном свойство первой кнопки

Answer 2

Вы можете добавить маржин-Дно свойство первой кнопки, например:

button1 { margin-bottom: 5px; } 

Вы также, возможно, потребуется также добавить display: block как а также span теги byd efault являются встроенными, а встроенные элементы не влияют на верхние и нижние поля.

Answer 3

Прежде всего, если вы хотите о использовать media queries вы должны использовать их в фигурные скобки, например:

@media screen and (max-width: 767px) and (min-width: 320px){ 
/*CSS here*/ 
} 

Здесь у вас есть fiddle, который содержит основные думает, что вам нужно, вы можете играть с margin в check