Сдвиг текста вверх. Не понимаю чем образован?

Question

[Idwln]

Вообщем у меня есть текст, который находится под заголовком и картинкой, а также всё это заключено в 1 общий див. (для каждого элемента также есть див). При добавлении большого количества текста, блок просто уезжает вверх, а хочется, чтобы текст выходил вниз. Вот код:

body {
	/* font-family: "Gilroy", sans-serif; */
	line-height: 1;
	height: 100%;
	font-size: 0px;
	max-width: 1440px;
	font-family: "Poppins";
}


/* --------------------- */
.block{
	max-width: 1440px;
}
.container {
	display: inline-block;
	text-align: center;
}
.fcontainer{
	display: inline-block;
	padding-left: 165px;
}
.container:not(:last-child){
	display: inline-block;
	margin-right: 35px;
}
.title {
	padding-top: 290px;
	padding-bottom: 58px;
	margin-left: 128px;
	font-style: normal;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.48;
	text-align: center;
	letter-spacing: 0.8px;
	color: #323232;
}

.image {
	display: inline-block;
	margin-bottom: 14px;
}

.subtitle {
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
	line-height: 42px;
	letter-spacing: 0.5px;
	color: #323232;
}

.text {
	margin-top: 2px;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 27px;
	max-width: 248px;
	letter-spacing: 1.15px;
	color: #323232;
	
}

<main>
		<div class="block">
			<div class="title">Why choose us?</div>
			<div class="container fcontainer">
				<div class="image"><img src="img/01.svg" alt="icon"></div>
				<div class="subtitle">Performance </div>
				<div class="text">Torquem detraxit hosti et quidem se texit, ne ad. Lorem ipsum dolor sit amet consectetur
					adipisicing elit. Quae, rerum.</div>
			</div>
			<div class="container">
				<div class="image"><img src="img/02.svg" alt="icon"></div>
				<div class="subtitle">Entrepreneurship</div>
				<div class="text">Torquem detraxit hosti et quidem se texit, ne ad.</div>

			</div>
			<div class="container">
				<div class="image"><img src="img/03.svg" alt="icon"></div>
				<div class="subtitle">Authenticity</div>
				<div class="text">Torquem detraxit hosti et quidem se texit, ne ad.</div>

			</div>
			<div class="container">
				<div class="image"><img src="img/04.svg" alt="icon"></div>
				<div class="subtitle">Kindness</div>
				<div class="text">Torquem detraxit hosti et quidem se texit, ne ad.</div>

			</div>
		</div>

Answer 1

[BEKa T]

а ты уверен что так хочешь верстать? Попробуй уменьшить/увеличить окно браузера Ctrl+колесико мыши. У тебя верстка не по центру

Comments

[Idwln]

Не выглядит как то, что можно пофиксить одним скроллом. Да, и извините конечно, но вы точно людям не мотивацию даёте)

[BEKa T]

Idwln, не понял, ну да ладно. Крч у тебя это происходит из-за свойства display: inline-block;

[Idwln]

BEKa T, А можете сказать из-за какого именно? Я не раз объявлял данное свойство

[BEKa T]

Idwln,

.container {
  display: inline-block;
  text-align: center;
}

[BEKa T]

Я бы тебе рекомендовал сделать так. Использовать display: flex и удалить все inline-block'и

html

<main>
   <div class="title">Why choose us?</div>
    <div class="block">
      <div class="container fcontainer">
        <div class="image"><img src="img/01.svg" alt="icon"></div>
        <div class="subtitle">Performance </div>
        <div class="text">Torquem detraxit hosti et quidem se texit, ne ad. Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Quae, rerum.</div>
      </div>
      <div class="container">
        <div class="image"><img src="img/02.svg" alt="icon"></div>
        <div class="subtitle">Entrepreneurship</div>
        <div class="text">Torquem detraxit hosti et quidem se texit, ne ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste explicabo assumenda eum quae vitae dicta itaque aperiam ducimus id non provident illo perspiciatis cumque tempora accusantium excepturi suscipit, minus animi ab. Sint voluptates, impedit! lorem45</div>

      </div>
      <div class="container">
        <div class="image"><img src="img/03.svg" alt="icon"></div>
        <div class="subtitle">Authenticity</div>
        <div class="text">Torquem detraxit hosti et quidem se texit, ne ad.</div>

      </div>
      <div class="container">
        <div class="image"><img src="img/04.svg" alt="icon"></div>
        <div class="subtitle">Kindness</div>
        <div class="text">Torquem detraxit hosti et quidem se texit, ne ad.</div>

      </div>
    </div>
</main>

CSS

body {
  /* font-family: "Gilroy", sans-serif; */
  line-height: 1;
  height: 100%;
  font-size: 0px;
  max-width: 1440px;
  font-family: "Poppins";
}


/* --------------------- */
.block{
  max-width: 1440px;
  display: flex;
}
.container {
  text-align: center;
}
.fcontainer{
  padding-left: 165px;
}
.container:not(:last-child){
  margin-right: 35px;
}
.title {
  padding-top: 290px;
  padding-bottom: 58px;
  margin-left: 128px;
  font-style: normal;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.48;
  text-align: center;
  letter-spacing: 0.8px;
  color: #323232;
}

.image {
  display: inline-block;
  margin-bottom: 14px;
}

.subtitle {
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  letter-spacing: 0.5px;
  color: #323232;
}

.text {
  margin-top: 2px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
  max-width: 248px;
  letter-spacing: 1.15px;
  color: #323232;
  
}

[Idwln]

BEKa T, Убрав данное свойство получаю такой результат

[BEKa T]

Idwln, а теперь добавь

.block{
  max-width: 1440px;
  display: flex;
}

[Idwln]

BEKa T, Проблема в том, что со flex"ом ещё не знаком, а надо сделать используя только свои знания. + со флексом всё норм, но title уезжает) А т.к. с данным display'ем не знаком, значит и как пофиксить не знать буду)

[BEKa T]

ты меня конечно извини, но это свойство другого не сделает) либо используй display: inline-flex

[Idwln]

BEKa T, inline-flex оставляет такой же результат. Следовательно надо будет отступами делать по другому совсем. В любом случае спасибо за ответ!

[BEKa T]

Idwln, ты все display: inline-block удалил? Не за что :)

[Idwln]

BEKa T, Возможно их надо в определённое поставить состояние? Просто у меня там и картинки и текст) Так что рознится может)

[BEKa T]

Idwln, если прям очень надо. Могу через тг показать/объяснить

[Idwln]

BEKa T, Нет, не обязательно) Это просто практика для себя в процессе обучения) Ещё совсем огурчик просто тут

[BEKa T]

Idwln, хорошо. Приятного соления тебе в этом не легком, но очень интересном пути))