Как убрать отступы между .cart-nav1
и .cart-nav2
, а также между элементами внутри .search
?
Верстка на сайте.
Верстка в fiddle.
Код:
* {
padding: 0;
margin: 0;
}
.header {
background: #abeafa;
width: 100%;
position: relative;
padding-top: 24px;
}
.header .cart {
clear: both;
width: 270px;
height: 150px;
padding-top: 42px;
}
.header .cart .cart-nav {
clear: both;
background: #fb4d01;
}
.header .cart .cart-nav button.cart-nav1, .header .cart .cart-nav button.cart-nav2 {
border: none;
outline: medium none;
text-transform: uppercase;
background: #ee4a02;
width: 133px;
height: 27px;
color: #fff;
font-size: 11px;
font-family:'Raleway', sans-serif;
cursor: pointer;
}
.cart .cart-nav button.cart-nav2 {
background: #e24602;
}
.cart .search input[type="search"] {
width: 200px;
height: 34px;
border: none;
outline: medium none;
text-transform: uppercase;
font-family:'Raleway', sans-serif;
color: #0c0c0c;
font-size: 10px;
}
.header .cart .search input[type="reset"] {
background: url(http://p2.learning-verstka.esy.es/img/x.jpg) no-repeat 50% 50%;
width: 34px;
height: 34px;
border: none;
outline: medium none;
}
.header .cart .search .fa-search {
width: 28px;
height: 34px;
background: #333333;
color: #fff;
line-height: 2;
}
<div class="header">
<div class="cart cf">
<div class="cart-nav cf">
<button class="cart-nav1">view cart</button>
<button class="cart-nav2">checkout</button>
</div>
<div class="search">
<label>
<input type="search" name="search" placeholder="search" />
<input type="reset" value="" />
<img class="fa fa-search" src="data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAIAAAC1JZyVAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIXSURBVEhL7ZS9y/FhFMfv/8f7S1KyKFFGG5vBYGIwKWWR/wAlWQwWqzIqGYRNVgoLJYm83x+O9CzX7+759fTci+9wun7nus75XOdchy/rf9EHo0MfjA79NsZisdjtdqzNZjOZTFjxszCbzVh28Yt976qkxBBvNBrByPrPRLKWG7Bg9+nWklbTHA6H3Jc1FfBJXnG+Sfhl9xGglhaGaoRB3lgs1ul0NpvNbrcbj8fpdFqqEftjQUqMpHA6nTDy+fz1er3dbvenTqcTttFoSH0cQ68whZSYdx+i0ahkXy6X1Wq1VCpNJhM+AedyOQ7A0F+NBANrtVoknU6nPp+Pyuik2+3u9/uXy2U2m8kj6X8b6QbxvAeYQqEgYBmBRCLxKPB+DwQC+AWmIa2mkRErL5FKpVgLCUwoFDqfz/jD4TB+/Rgk1SwWC9IVi0XGAQ9+8MlkEid983g8gPVjJCMXZ6LIuN1uI5GIPLXf75/P5wzecDiUkxx7xKilxEhGFAwGV6uV3H0wGPR6vf1+L/PdbrddLpd0Ug6rpMQwUVi6wU3j8fh6vQYD7P3rEdXrdTn2DFJKieElDAYD14TH2uv1lsvlbrc7Go1qtVo2mz0ej2CgVioVnvAVppASQ6T8yJHMGAuoFIdFzB6to8TD4cDnK0yhH0bgPawkkiuzkAfnQCaT4S+u2WzKGQ0pMf9WH4wOfTA69MH8tazWbxJmN5B5MkiPAAAAAElFTkSuQmCC"/>
</label>
</div>
</div>
</div>
Где я прописала их?
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Введение: Публикую на сайте статьи и на главной они отображаются (картинка находится с левой стороны а краткий текст с Правой!) и все друг...
Я тут макет пытался сверстатьИ наткнулся на слайдер
При загрузке любых сайтов, в исходном коде обнаружил одну и туже строку в блоке head