Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Непонятный отступ (HTML - CSS)
 
 автор: Sapun4ik   (05.12.2012 в 02:35)   письмо автору
198.6 Кб
 
 

Доброе время суток.
Подскажите пожалуйста в чем проблем. Не первый день ломаю голову.. Как убрать пробел между картинками.
Вот код
<style>
#mini_nav_right{
width:300px;
}
#mini_nav_right p a,#mini_nav_right p{
text-decoration: none;
  display: block;
  padding:0;
  margin:0;
  outline:0;
  font-size:100%;
}
img.img{
padding:4px;
border:solid 1px #ddd;
background-color:#f2f2f2;
}
</style>

<aside id="mini_nav_right">
    <p><a href="#"><img class="img" src="img/telephone_directory.jpg" height="35" width="300"></a></p>
    <p><a href="#"><img class="img" src="img/CALENDAR_OF_EVENTS.jpg" height="35" width="300"></a></p>
    <p><a href="#"><img class="img" src="img/schedule.jpg" height="35" width="300"></a></p>
    <p><a href="#"><img class="img" src="img/Weather.jpg" height="35" width="300"></a></p>
</aside>    


Скрин приложен

  Ответить  
 
 автор: ЯСА   (05.12.2012 в 03:17)   письмо автору
 
   для: Sapun4ik   (05.12.2012 в 02:35)
 

всё хорошо сделали - код выложили, скрин приложили...

только вот какой-такой "пробел между картинками" (он же - "отступ") вам убрать надо - не объяснили
и в каком именно браузере проблема возникает - не написали

на скриншоте укажите стрелочкой (нарисуйте)

  Ответить  
 
 автор: Sapun4ik   (05.12.2012 в 11:42)   письмо автору
208.8 Кб
 
   для: ЯСА   (05.12.2012 в 03:17)
 

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

  Ответить  
 
 автор: ЯСА   (05.12.2012 в 12:11)   письмо автору
 
   для: Sapun4ik   (05.12.2012 в 11:42)
 

padding:4px;

4 сверху + 4 снизу = 8 между картинками
---------

а вообще за такой код руки отрывать надо
код надо писать КРАСИВО

  Ответить  
 
 автор: Sapun4ik   (05.12.2012 в 12:53)   письмо автору
243.7 Кб
 
   для: ЯСА   (05.12.2012 в 12:11)
 

Прошу прощение, скрин был не достоверен, исправил. Этот padding специально, ему и задам background.. Он делает рамку + обведен border 1px. А вот откуда отступ от border до border. Побывал убрать и padding и border. Отступ все равно есть.

  Ответить  
 
 автор: ЯСА   (05.12.2012 в 13:24)   письмо автору
 
   для: Sapun4ik   (05.12.2012 в 12:53)
 

зачем вам в принципе нужен тег <p> ?
ссылку сделали display: block - значит, написанные подряд, они выстроятся по вертикали одна под одной

так зачем тег <p>?
-----

повторяю - код надо писать КРАСИВО:
<style>
#mini_nav_right {
                width: 300px;
                }

#mini_nav_right a {
                  text-decoration: none;
                  display: block;
                  padding: 0;
                  margin: 0;
                  outline-style: none;
                  }

#mini_nav_right a img {
                      width: 300px;
                      height: 35px;
                      padding: 4px;
                      border: solid 1px #ddd;
                      background-color: #f2f2f2;
                      }
</style>

<aside id="mini_nav_right">
   <a href="#"><img src="img/telephone_directory.jpg"></a>
   <a href="#"><img src="img/calendar_of_events.jpg" ></a>
   <a href="#"><img src="img/schedule.jpg"           ></a>
   <a href="#"><img src="img/weather.jpg"            ></a>
</aside>     

  Ответить  
 
 автор: Sapun4ik   (05.12.2012 в 15:10)   письмо автору
 
   для: ЯСА   (05.12.2012 в 13:24)
 

Хорошо. Код красивый. Но отступ так и остался. 1 в 1 без изменений.

  Ответить  
 
 автор: Sfinks   (05.12.2012 в 18:20)   письмо автору
 
   для: Sapun4ik   (05.12.2012 в 15:10)
 

Ну может у браузера есть какие-то свойства по-умолчанию для тега <aside>?

Попробуйте добавить:
#mini_nav_right{ 
  padding:0; 
  margin:0; 
}

  Ответить  
 
 автор: ЯСА   (05.12.2012 в 23:52)   письмо автору
 
   для: Sapun4ik   (05.12.2012 в 15:10)
 

#mini_nav_right a {
                  text-decoration: none;
                  display: block;
                  padding: 0;
                  margin: 0;
                  outline-style: none;
                  font-size: 0;
                  line-height: 0;

                  }

  Ответить  
 
 автор: Sapun4ik   (06.12.2012 в 00:48)   письмо автору
 
   для: ЯСА   (05.12.2012 в 23:52)
 

Отлично! Огромное спасибо. Отступ пропал .

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования