CSS_ выравнивание inline-блоков

AndreyMetallist · June 10, 2018

Добрый день. Изучаю сейчас тему блочной модели и столкнулся с такой ситуацией при выравнивании инлайн-блоков. Если создать родитель, в него вложить два дочерних блока и им назначить поведение как inline-block, вложить туда просто текст - то они ведут себя чудесно. Стают в строку. Все отлично.

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

Помогите пожалуйста понять почему в втором случае блоки начинают вертикально выравниваться. Причем не очень красиво выравниваться.

И можно ли их в данном случае выровнять вертикально в одну строку без применения позиционирования?

Спасибо!

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
	html, body {
		margin: 0;
		background: #494040;
	}
	.parent1 {
		background: green;
		width:900px;
		margin:100px auto;
		text-align: center;
		overflow: hidden;
	}
	.block1{
		background: yellow;
		width:350px;
		height: 350px;
		display: inline-block;
		margin:0 20px;
	}
	.block2{
		background: yellow;
		width:350px;
		height: 350px;
		display: inline-block;
		margin:0 20px;
	}
	.inner-block {
		background-color: blue;
		width: 100px;
		height: 100px;
		display: inline-block;
		margin:0 5px;
	}
	.parent2 {
		background: blue;
		width:900px;
		margin:100px auto;
		text-align: center;
		overflow: hidden;
	}
	.block3{
		background: yellow;
		width:350px;
		height: 350px;
		display: inline-block;
		margin:0 20px;
	}
</style>
</head>
<body>
	<div class="parent2">
		<div class="block3">Block of text</div>
		<div class="block3">Block of text</div>
	</div>

	<div class="parent1"><!--  
		 --><div class="block1">Block of text</div><!-- 
		 --><div class="block2"><!-- 
		 	 --><h4>Block of text</h4><!-- 
		 	 --><div class="inner-block"></div><!-- 
		 	 --><div class="inner-block">block2</div><!-- 
		 	 --><div class="inner-block"></div><!-- 
		  --></div><!-- 
	 --></div>
  
</body>
</html>

AlexZaw · June 10, 2018

Начнем с того что заголовок это блочный элемент и по умолчанию занимает 100% ширины. Далее, у строчных элементов выравнивание по вертикали по умолчанию стоит baseline, что и происходит у вас во втором случае.

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

Задайте для .block2 и .inner-block vertical-align:top;

AndreyMetallist · June 10, 2018

5 минут назад, AlexZaw сказал:

Начнем с того что заголовок это блочный элемент и по умолчанию занимает 100% ширины. Далее, у строчных элементов выравнивание по вертикали по умолчанию стоит baseline, что и происходит у вас во втором случае.

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

Задайте для .block2 и .inner-block vertical-align:top;

Получилось! Благодарю за пояснение!

Sign In

CSS_ выравнивание inline-блоков

Question

AndreyMetallist

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

AlexZaw

Link to comment

Share on other sites

AndreyMetallist

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information