Как убрать просвет между двумя <div>?

@Gabriel.exe · Регистрация: 22.02.2012

Студворк — интернет-сервис помощи студентам

Такая ситуа: расположил вертикально 3 блока ДИВ.
Каждый высотой 101px(строго по содержимому(картинка+ рамки: 85+8+8=101px)).
При просмотре в браузере между картинками(точнее между рамками) появляется пустое место в 16px.
Вопрос откуда оно взялось??? Ведь они должны примыкать вплотную...
(padding и margin не причём, их нету вообще.)

p.s: что удивительно, когда обрамляю ДИВ рамкой в 1px,просвет пропадает.
Вместо него между картинками полосочка соединённых рамок.

@gulliver · 16.05.2012, 22:00

код покажи

@Gabriel.exe · 16.05.2012, 22:07 **[ТС]**

Собсно вот он:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
<head>
  <title>Стихия Огня</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<div class="opisanie">
    <img class="fire" src="fire/fire_spikes.jpg"/>
    <p><span class="name_fire">Огненные шипы.</span> Уровень 1.<br />
    Заклинание.<br />
    Наносит урон в 3 ед. всем вражеским существам.</p>
</div>
<div class="opisanie">
    <img class="fire" src="fire/orc.jpg" />
    <p><span class="name_fire">Орк.</span>Уровень 2.<br />
    Урон:4. Жизнь:13.<br />
    Если в момент вызова данного существа сила земли меньше 6, то вызвавшему наноситься урон в 4 ед.</p>
</div>
<div class="opisanie">
    <img class="fire" src="fire/fire_ritual.jpg" />
    <p><span class="name_fire">Огненный ритуал.</span>Уровень 3.<br />
    Заклинание.<br />
    +2 к силе огня заклинателя.<br />
    -1 к силе воды соперника.</p>
</div>
</body>
</html>

И css

CSS
1
2
3
4
5
img.fire{width:85px; height:85px;border-style:ridge; border-width:8px;border-color:#FF0000;float:left;}
 
 
 
div.opisanie{width:600px;height:101px;clear:left;border-style:solid; border-width:1px;}

(Я кажется уже надыбал ответ. Здесь на сайте в теме от 13 мая.)

@gulliver · 16.05.2012, 22:11

Ну тогда дерзай, если надыбал ответ

@Gabriel.exe · 16.05.2012, 22:13 **[ТС]**

Да там только ссылка на анг. спецификацию(а я не шпрехен зе дойч).

А как убрать просвет не используя рамку ни слова.

@gulliver · 16.05.2012, 22:13

Лично у меня, пустого места между рамками нет. (Chrome)

@Gabriel.exe · 16.05.2012, 22:20 **[ТС]**

Извиняюсь, я не ту строку стиля выдал.

Вот что нужно записать.

CSS
1
div.opisanie{width:600px;height:101px;clear:left;}

Теперь рамка будет убрана, а между ДИВами будет просвет, не пойми откуда взявшийся.

@gulliver · 16.05.2012, 22:24

что тут не так ?

@Gabriel.exe · 16.05.2012, 22:32 **[ТС]**

gulliver,благодарствую за потраченное время

.
Дело в браузере.
В хроме(у Вас) нормально, щас вот в IE загрузил тоже нормуль.
А в опере (которую я юзаю) не порядок.

Всем кто с таким столкнётся полезно почитать ссыль:http://htmlbook.ru/samlayout/b... ya-otstupy

Пойду и я почитаю.

@gulliver · 16.05.2012, 22:34

Да не за что.
p.s мое мнение что с отступами лучше

.

@Gabriel.exe · 16.05.2012, 22:38 **[ТС]**

Мне тоже так больше нравиться, я просто хотел узнать откуда они взялись.

@Heleg · 17.05.2012, 00:05

Gabriel.exe, у тебя ж опера, там есть dragonfly. ты туда заглядывал?

@Gabriel.exe · 17.05.2012, 09:27 **[ТС]**

Хе! Спасибо. Я эту штуку видел но только сейчас допёр для чего она.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Gabriel.exe 43 / 17 / 4 Регистрация: 22.02.2012 Сообщений: 327

	Как убрать просвет между двумя <div>? 16.05.2012, 21:41. Показов 7767. Ответов 12 Метки нет (Все метки) Такая ситуа: расположил вертикально 3 блока ДИВ. Каждый высотой 101px(строго по содержимому(картинка+ рамки: 85+8+8=101px)). При просмотре в браузере между картинками(точнее между рамками) появляется пустое место в 16px. Вопрос откуда оно взялось??? Ведь они должны примыкать вплотную... (padding и margin не причём, их нету вообще.) p.s: что удивительно, когда обрамляю ДИВ рамкой в 1px,просвет пропадает. Вместо него между картинками полосочка соединённых рамок. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	16.05.2012, 22:00
	код покажи 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	16.05.2012, 22:11
	Ну тогда дерзай, если надыбал ответ 0

@Gabriel.exe 43 / 17 / 4 Регистрация: 22.02.2012 Сообщений: 327
	16.05.2012, 22:13 [ТС]
	Да там только ссылка на анг. спецификацию(а я не шпрехен зе дойч). А как убрать просвет не используя рамку ни слова. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	16.05.2012, 22:13
	Лично у меня, пустого места между рамками нет. (Chrome) 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	16.05.2012, 22:24
	что тут не так ? Миниатюры 1

@Gabriel.exe 43 / 17 / 4 Регистрация: 22.02.2012 Сообщений: 327
	16.05.2012, 22:32 [ТС]
	gulliver,благодарствую за потраченное время. Дело в браузере. В хроме(у Вас) нормально, щас вот в IE загрузил тоже нормуль. А в опере (которую я юзаю) не порядок. Всем кто с таким столкнётся полезно почитать ссыль:http://htmlbook.ru/samlayout/b... ya-otstupy Пойду и я почитаю. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	16.05.2012, 22:34
	Да не за что. p.s мое мнение что с отступами лучше . 0

@Gabriel.exe 43 / 17 / 4 Регистрация: 22.02.2012 Сообщений: 327
	16.05.2012, 22:38 [ТС]
	Мне тоже так больше нравиться, я просто хотел узнать откуда они взялись. 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	17.05.2012, 00:05
	Gabriel.exe, у тебя ж опера, там есть dragonfly. ты туда заглядывал? 1

@Gabriel.exe 43 / 17 / 4 Регистрация: 22.02.2012 Сообщений: 327
	17.05.2012, 09:27 [ТС]
	Хе! Спасибо. Я эту штуку видел но только сейчас допёр для чего она. 0