Как сделать отступ между этими блоками как показано на 2 скриншоте? Margin не работает, из-за Padding'а нельзя выделять верхние блоки
Прикрепляю разметку:
div.block6 {
margin-top: 3%;
float: left;
width: 100%;
min-height: 800px;
background: url(../img/block6bg.png)repeat center center;
}
.circleproduct {
width: 20px;
height: 20px;
background: #ff9800;
border-radius: 50px;
position: absolute;
margin-top: 65%;
transition: 0.5s;
}
p.product {
font-family: "Roboto", sans-serif;
display: inline-block;
color: #ff9800;
font-size: 1.5em;
margin-top: 10%;
}
p.producttext {
font-family: "Roboto", sans-serif;
display: inline-block;
color: #eeeeee;
position: relative;
left: 14%;
}
<div class="block6">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="col-md-3">
<img src="img/fn/1.png" class="product" alt="">
</div>
<div class="col-md-1">
<div class="circleproduct"></div>
</div>
<div class="col-md-6">
<p class="product">СМАРТ-ТЕРМИНАЛ ФН</p>
</div>
<div class="col-md-8">
<p class="producttext">Для тех, кому не нужен сканер штрихкодов</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="col-md-3">
<img src="img/fn/4.png" class="product" alt="">
</div>
<div class="col-md-1">
<div class="circleproduct"></div>
</div>
<div class="col-md-6">
<p class="product">СМАРТ-ТЕРМИНАЛ ФН</p>
</div>
<div class="col-md-8">
<p class="producttext">Для торговцев крепким алкоголем</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="col-md-3">
<img src="img/fn/2.png" class="product" alt="">
</div>
<div class="col-md-1">
<div class="circleproduct"></div>
</div>
<div class="col-md-6">
<p class="product">СТАНДАРТ ФН</p>
</div>
<div class="col-md-8">
<p class="producttext">Для магазинов, кафе, пивных и салонов — всех,
кто не торгует крепким алкоголем</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="col-md-3">
<img src="img/fn/5.png" class="product" alt="">
</div>
<div class="col-md-1">
<div class="circleproduct"></div>
</div>
<div class="col-md-7">
<p class="product">СМАРТ-ТЕРМИНАЛ БЕЗ ФН</p>
</div>
<div class="col-md-8">
<p class="producttext">Для тех, кто пока не обязан переходить
на новый порядок — услуги, патент, ЕНВД.
Когда понадобится, дополните комплект
фискальным накопителем.</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="col-md-3">
<img src="img/fn/4.png" class="product" alt="">
</div>
<div class="col-md-1">
<div class="circleproduct"></div>
</div>
<div class="col-md-6">
<p class="product">СТАНДАРТ ФН</p>
</div>
<div class="col-md-8">
<p class="producttext">Для магазинов, кафе, пивных и салонов —
всех, кто не торгует крепким алкоголем</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="col-md-3">
<img src="img/fn/6.png" class="product" alt="">
</div>
<div class="col-md-1">
<div class="circleproduct"></div>
</div>
<div class="col-md-6">
<p class="product">СТАНДАРТ БЕЗ ФН</p>
</div>
<div class="col-md-8">
<p class="producttext">Для тех, кто еще не переходит на новый
порядок — услуги, патент, ЕНВД, но
использует сканер штрихкодов в работе.
Фискальный накопитель можно вставить позже</p>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br>
в нужном месте разметки не подходит?.producttext
. А почему margin не работает для<div class="col-md-6 col-xs-12"></div>
?