Как можно по горизонтали расположить три фотографии с затемненными полосками содержащими ссылки (с селектором .photo-title
), при этом дать промежуток между первой и второй, второй и третьей фотографией? border-spacing
не подходит так как дает промежуток не только по внутренним отступам но и по внешним, а мне надо по внутренним.
.photo {
position:relative; margin-top: 10px;
}
.photo-title {
left: 0;
bottom:0;
position:absolute;
height:35px;
background:#000;
background:rgba(0,0,0,.5);
width:332px;
font-size:1em;
color:#fff;
text-align:center;
padding-bottom: 10px;
}
<div class="photo">
<a href=""><img src="img/img7.jpg" alt="" /></a>
<div class="photo-title">
<p><a href="">Продукт компании</a></p>
</div>
</div>
<div class="photo">
<a href=""><img src="img/img8.jpg" alt="" /></a>
<div class="photo-title">
<p><a href="">Наши Услуги</a></p>
</div>
</div>
<div class="photo">
<a href=""><img src="img/img9.jpg" alt="" /></a>
<div class="photo-title">
<p><a href="">Информация о нас</a></p>
</div>
</div>