Отступы между картинками и дивом - HTML и CSS

Великий Саша · 29.10.2009, 13:14

Добрый день, есть вот такой код:

Код HTML:

<html>
	<body>
		<img src="img/top.gif">
		<div style=" background:url(img/content.gif); width:541px;">
				Lorem ipsum dolor sit amet, consectetur adipiscing 
				 vel mattis nibh blandit a. Aliquam id mi eu metus 
				lacus et nunc eleifend quis euismod magna dignissim. 
				luctus sed augue. Vivamus pellentesque velit vel 
				in hendrerit dui ullamcorper vulputate. Nam at eros 
				vestibulum vitae commodo id, tempor sit amet lacus. 
				sit amet mauris ante. Proin gravida, quam ornare 
 				Maecenas euismod quam eget turpis rhoncus pulvinar. 
		</div>
		<img src="img/bottom.gif">
	</body>
</html>

Все отображается нормально, но если текст поместить в <p>

Код HTML:

<html>
	<body>
		<img src="img/top.gif">
		<div style=" background:url(img/content.gif); width:541px;">
                                <p>
				Lorem ipsum dolor sit amet, consectetur adipiscing 
				 vel mattis nibh blandit a. Aliquam id mi eu metus 
				lacus et nunc eleifend quis euismod magna dignissim. 
				luctus sed augue. Vivamus pellentesque velit vel 
				in hendrerit dui ullamcorper vulputate. Nam at eros 
				vestibulum vitae commodo id, tempor sit amet lacus. 
				sit amet mauris ante. Proin gravida, quam ornare 
 				Maecenas euismod quam eget turpis rhoncus pulvinar.
                               </p> 
		</div>
		<img src="img/bottom.gif">
	</body>
</html>

То между картинками и дивом получаются вертикальные отступы в 16 пикс. Оказалось, что это размер шрифта и если его изменять, то отсуп будет тоже меняться. Это происходит во всех броузерах кроме IE.
Там при базом размере появляется отступ 4 пикс и он тоже зависит от размера шрифта, но странно, не пропорционально. Также, в IE этот отступ только между верхней картинкой и дивом.

Я нашел такие решения:
В IE нужно верхний <img> и <div> записать в одну строку:

Код HTML:

<html>
	<body>
		<img src="img/top.gif"><div style=" background:url(img/content.gif); width:541px;">
                                <p>
				Lorem ipsum dolor sit amet, consectetur adipiscing 
				 vel mattis nibh blandit a. Aliquam id mi eu metus 
				lacus et nunc eleifend quis euismod magna dignissim. 
				luctus sed augue. Vivamus pellentesque velit vel 
				in hendrerit dui ullamcorper vulputate. Nam at eros 
				vestibulum vitae commodo id, tempor sit amet lacus. 
				sit amet mauris ante. Proin gravida, quam ornare 
 				Maecenas euismod quam eget turpis rhoncus pulvinar.
                               </p> 
		</div>
		<img src="img/bottom.gif">
	</body>
</html>

На остальные броузеры это не повлияет.
Для них можно сделать такое:
Для дива прописать border (но не ноль), все круто, но рамка межает
Или прописать (для дива) padding-top = 1 - это уберет отступ между верхней картинкой и дивом. И padding-bottom = 1 - это уберет отступ между нижней картинкой.

Вот вопрос: Почему вообще эти отступы появляются?
Почему они в IE другие. Почему бордер, паддинг и запись в одну строку помагают? И как можно от этого избавиться по-другому?

МОДЕРАТОР: Оформляйте код в специальные теги.

Алориан · 13.11.2009, 11:59

Попробуйте margin и padding обнулить у тэга <p>.
По умолчанию он отличен от нуля.

Gerb22 · 13.11.2009, 18:44

Я еще люблю использовать vspace / hspace (для картинок) - попробуйте

bol2909 · 19.11.2009, 12:22

я еще советую тебе после картинки использовать тэг <alt=...></alt>
он помомжет тем у кого не загрузяться картинки узнать о чем она то есть туда пишешь понятие картинки))

Gerb22 · 20.11.2009, 11:19

Цитата:

Сообщение от bol2909

я еще советую тебе после картинки использовать тэг <alt=...></alt>
он помомжет тем у кого не загрузяться картинки узнать о чем она то есть туда пишешь понятие картинки))

Классно вы новые теги придумываете

Если уж на то пошло, вместо alt лучше title ставить, а еще лучше - и то и другое

(alt - подсказка не будет отображаться при наведении на загруженную картинку в FF, а title не будет отображать на не загруженной в IE, такая вот коллизия).

29.10.2009, 13:14	#1
Великий Саша Новичок Джуниор Регистрация: 29.10.2009 Сообщений: 6	Отступы между картинками и дивом Добрый день, есть вот такой код: Код HTML: <html> <body> <img src="img/top.gif"> <div style=" background:url(img/content.gif); width:541px;"> Lorem ipsum dolor sit amet, consectetur adipiscing vel mattis nibh blandit a. Aliquam id mi eu metus lacus et nunc eleifend quis euismod magna dignissim. luctus sed augue. Vivamus pellentesque velit vel in hendrerit dui ullamcorper vulputate. Nam at eros vestibulum vitae commodo id, tempor sit amet lacus. sit amet mauris ante. Proin gravida, quam ornare Maecenas euismod quam eget turpis rhoncus pulvinar. </div> <img src="img/bottom.gif"> </body> </html> Все отображается нормально, но если текст поместить в <p> Код HTML: <html> <body> <img src="img/top.gif"> <div style=" background:url(img/content.gif); width:541px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing vel mattis nibh blandit a. Aliquam id mi eu metus lacus et nunc eleifend quis euismod magna dignissim. luctus sed augue. Vivamus pellentesque velit vel in hendrerit dui ullamcorper vulputate. Nam at eros vestibulum vitae commodo id, tempor sit amet lacus. sit amet mauris ante. Proin gravida, quam ornare Maecenas euismod quam eget turpis rhoncus pulvinar. </p> </div> <img src="img/bottom.gif"> </body> </html> То между картинками и дивом получаются вертикальные отступы в 16 пикс. Оказалось, что это размер шрифта и если его изменять, то отсуп будет тоже меняться. Это происходит во всех броузерах кроме IE. Там при базом размере появляется отступ 4 пикс и он тоже зависит от размера шрифта, но странно, не пропорционально. Также, в IE этот отступ только между верхней картинкой и дивом. Я нашел такие решения: В IE нужно верхний <img> и <div> записать в одну строку: Код HTML: <html> <body> <img src="img/top.gif"><div style=" background:url(img/content.gif); width:541px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing vel mattis nibh blandit a. Aliquam id mi eu metus lacus et nunc eleifend quis euismod magna dignissim. luctus sed augue. Vivamus pellentesque velit vel in hendrerit dui ullamcorper vulputate. Nam at eros vestibulum vitae commodo id, tempor sit amet lacus. sit amet mauris ante. Proin gravida, quam ornare Maecenas euismod quam eget turpis rhoncus pulvinar. </p> </div> <img src="img/bottom.gif"> </body> </html> На остальные броузеры это не повлияет. Для них можно сделать такое: Для дива прописать border (но не ноль), все круто, но рамка межает Или прописать (для дива) padding-top = 1 - это уберет отступ между верхней картинкой и дивом. И padding-bottom = 1 - это уберет отступ между нижней картинкой. Вот вопрос: Почему вообще эти отступы появляются? Почему они в IE другие. Почему бордер, паддинг и запись в одну строку помагают? И как можно от этого избавиться по-другому? МОДЕРАТОР: Оформляйте код в специальные теги. Последний раз редактировалось Arigato; 29.10.2009 в 13:39.

13.11.2009, 18:44	#3
Gerb22 Пользователь Регистрация: 10.11.2009 Сообщений: 48	Я еще люблю использовать vspace / hspace (для картинок) - попробуйте моя рассказывать о php

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Щели в IE между картинками	sdm98	HTML и CSS	2	05.10.2009 10:49
Отступы в RTF	Utkin	Общие вопросы Delphi	7	13.03.2009 14:53
отступы от блока	Grind	HTML и CSS	0	04.01.2009 21:50
Отступы в С++	nighthack	Общие вопросы C/C++	6	16.06.2008 15:09
бд с картинками	TaTT DoGG	БД в Delphi	3	28.04.2008 08:21

13.11.2009, 11:59	#2
Алориан Пользователь Регистрация: 22.06.2009 Сообщений: 17	Попробуйте margin и padding обнулить у тэга <p>. По умолчанию он отличен от нуля.

19.11.2009, 12:22	#4
bol2909 Пользователь Регистрация: 19.11.2009 Сообщений: 19	я еще советую тебе после картинки использовать тэг <alt=...></alt> он помомжет тем у кого не загрузяться картинки узнать о чем она то есть туда пишешь понятие картинки))