Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2012, 12:49
Аспирант
Отправить личное сообщение для mister_maxim Посмотреть профиль Найти все сообщения от mister_maxim
 
Регистрация: 09.02.2009
Сообщений: 57

Что растягивает див дальше вложенного элемента?
Делаю сложную верстку, и вот сократил код до минимума, так чтобы показать непонятный для себя эффект, он наблюдается в опере, в гугл хроме и файрфоксе, на осле не проверял.
Значит вопрос: откуда берётся красный огрызок под синим квадратом, что увеличивает высоту внешнего красного дива на 5 пикселей от высоты вложенных?

<!DOCTYPE html>
<html>
	<head>
		<title>красный огрызок</title>
		<meta charset="utf-8">
		<style  type='text/css'>
			.inbl
			{
			padding: 0px; 
			margin: 0px; 
			border: 0px; 
			display: inline-block;
			}
		</style>
	</head>
	<body onload='init();'>
		<div class='inbl' style="background-color:#ff0000;  ">
			<div class='inbl' style="background-color:#00ff00;">
				<div class='inbl' style="background-color:#0000ff;   float: left;  height: 70px; width:70px;">
				</div>
			</div>
		</div>
	</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 20.10.2012, 18:24
Аспирант
Отправить личное сообщение для mister_maxim Посмотреть профиль Найти все сообщения от mister_maxim
 
Регистрация: 09.02.2009
Сообщений: 57

Насколько я понял сочетать такие вещи как float: left и display: inline-block; в одном элементе нежелательно, по сути последнее делает почти тоже что и первое, так что если убрать первое - нормально отображается только синий квадрат. float - вещь сильно уж мудрёная - она и из потока общего элемент выводит, и отодвигает другие инлайны от себя... насколько я помню когда год назад детально изучал его.
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2012, 17:29
Аватар для vchmuzh
Интересующийся
Отправить личное сообщение для vchmuzh Посмотреть профиль Найти все сообщения от vchmuzh
 
Регистрация: 18.07.2012
Сообщений: 11

зеленый див, так как он инлайн-блок, оставляет место для хвостиков букв, если задать ему например float:left то все норм будет

Последний раз редактировалось vchmuzh, 21.10.2012 в 17:35.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать, что бы див оставался на месте после перехода на следующую страницу? OklickSpb Общие вопросы Javascript 4 15.03.2012 22:02
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 21:59
О фрилансе (Личный опыт) free Оффтопик 105 18.08.2011 17:02
Поюзайте хомячка Nanto Ваши сайты и скрипты 30 06.06.2011 22:16
Как (эффективно) изучать JavaScript? JSTalker Общие вопросы Javascript 33 23.12.2010 03:13