PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: непонятный отступ у первого элемента
DlTA
Отправлено: 06 Ноября, 2019 - 12:09:24
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2902
Дата рег-ции: Окт. 2010  


Помог: 53 раз(а)




на фотке 1, у первого элемента есть какой то отступ, это ссылка и она расположена ниже, как убрать это смещение,
попытался добавить vertical-align: middle; к ссылке, оно выровнялось, но сместился span ниже,
ЧТО НЕ ТАК?
CODE (html):
скопировать код в буфер обмена
  1. <section>
  2.         <div class="list-city">
  3.                 <div class="list-city-link">
  4.                         <a href="">
  5.                                 <img src="/img/cities/paphos.png" alt="paphos">
  6.                                 <span>1111</span>
  7.                         </a>
  8.                         <a href="">
  9.                                 <img src="/img/cities/larnaca.png" alt="larnaca">
  10.                                 <span>22222</span>
  11.                         </a>
  12.                         <a href="">                                    
  13.                                 <img src="/img/cities/limassol.png" alt="limassol">
  14.                                 <span>333</span>
  15.                         </a>
  16.  
  17.                 </div>
  18.         </div>
  19. </section>


CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. *{
  3.         margin: 0;
  4.         padding: 0;
  5.         text-decoration: none;
  6.         font-family: Lato, OpenSansRegular, sans-serif;
  7.         font-size: 14px;
  8. }
  9. body{
  10.         color: #000;
  11.         background-color: #fff;
  12. }
  13. section{
  14.         padding-top: 300px;
  15. }
  16. .list-city{
  17.         height: 500px;
  18.         display: block;
  19.         margin: 0 auto;
  20.         width: 1170px;
  21.         text-align: center;
  22.        
  23. }
  24. .list-city>span{
  25.         display: inline-block;
  26.         vertical-align: middle;
  27.         margin-bottom: 40px;
  28.         font-size: 16px;
  29. }
  30. .list-city>span::before{
  31.         vertical-align: middle;
  32.         content: "";
  33.         width: 68px;
  34.         height: 3px;
  35.         background-color: #4eaf45;
  36.         background: linear-gradient(90deg, #05adab, #4eaf45);
  37.         display: inline-block;
  38.         margin-right: 1.3em;
  39. }
  40. .list-city-link{
  41.         margin-bottom: 2em;
  42. }
  43. .list-city-link>a>img{
  44.         display: block;
  45. }
  46. .list-city-link>div{
  47.         height: 311px;
  48.         width: 231px;
  49.         background-color: #999;
  50. }
  51. .list-city-link a, .list-city-link>div{
  52.         display: inline-block; 
  53.         position: relative;
  54.         text-decoration: none;
  55.         /*vertical-align: middle;*/
  56. }
  57. .list-city-link span{
  58.         display: block;
  59.         position: absolute;
  60.         bottom: 0px;
  61.         text-align: center;
  62.         width: 100%;
  63.         background-color: #ffffffad;
  64.         /*opacity: 0.5;*/
  65.         padding: 18px 0 18px 0;
  66.         font-size: 18px;
  67.         font-weight: bold;
  68.         color:#000;
  69.         -webkit-transition: all .3s ease-in-out;
  70.         transition: all .3s ease-in-out;
  71.        
  72. }
  73. .list-city-link a:hover span{
  74.         /*height: 100%;*/
  75.         padding: 0;
  76.         padding-top: 60%;
  77.         padding-bottom: 65%;
  78.         font-size: 24px;
  79. }
  80.  

Прикреплено изображение (Нажмите для увеличения)
t1.jpg

(Отредактировано автором: 06 Ноября, 2019 - 12:12:51)

 
 Top
andrewkard
Отправлено: 06 Ноября, 2019 - 14:17:44
Post Id


Участник


Покинул форум
Сообщений всего: 1364
Дата рег-ции: Нояб. 2014  


Помог: 30 раз(а)




У тебя еще какой то стиль применяется, если перенести в фидл то ничего такого не наблюдается
https://jsfiddle[dot]net/canmu2q7/
 
 Top
DlTA
Отправлено: 06 Ноября, 2019 - 15:37:26
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2902
Дата рег-ции: Окт. 2010  


Помог: 53 раз(а)




блин, ПРОШУ прощения,

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

в примере andrewkard, было изображение без прозрачности, и все стало понятно.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB