Как задать верхний отступ в вёрстке?

Question

[Даниил Емелин]

Как задать тексту "There is no other platforms for you as like" верхний отступ? Как бы вы задали его, если бы вам пришёл такой макет на вёрстку? Заранее спасибо.

P.S. Новичок в этом деле, сам макет с HTML Academy.

Comments

[Antowa Kartowa]

Снова я. У меня тут немного новой информации появилось. Может в этом ключе пригодится.
Вчера на собеседовании мне задали вопрос как оцентровать в окне скажем картинку (рекламу) размер которой заранее неизвестен только с помощью CSS но без флексбокса, без псевдоселекторов и без вертикального выравнивания и дополнительного оборачивающего растянутого на весь экран блока.

Решение очень простое:

.advertising-image {
  position: fixed;
  top: 50vh; (ну или %)
  left: 50vw;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/c5s38cj2/

Фишка этого приема еще в том, что если окно меньше картинки, то центр картинки все равно остается в центре видимой области.

Периодически встречается задача оцентровать блок внутри другого блока. Внешний блок может быть как больше внутреннего так и меньше в зависимости от экрана. Тот же подход, но вместо position: fixed - position: absolute или position: relative (в зависимости от задачи), а внешнему блоку соответственно position: relative.

Answer 1

[Сергей Горячев]

Никак не стал бы трахаться с отступом.
Позиционировал бы флексами блок с текстом и кнопкой по центру по вертикали и горизонтали.

Comments

[Даниил Емелин]

А, что, так можно было? :)
Всё получилось

[Сергей Горячев]

danny_kotov:

Answer 2

[Antowa Kartowa]

flex-box где-то так
я там ширину, высоту не сетал

.bigboard-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  flex: 0 0 100vw; //full screen width is minimum
}

.bigboard-text { //set font-size, width or max-width}

.bigboard-button {...}

Можно еще более старым традиционным методом с помощью vertical-align: middle выравнивать блок в самом центре. Можно изучить стили вот тут чтоб понять как попап выравнивается по центру. https://jsfiddle.net/AntowaKartowa/H2N5R/

Ключевые моменты это .popup__overlay:after (фоллбек для старых ие браузеров .popup__valignfix)
и .popup { display: inline-block; ... vertical-align: middle }

Надеюсь ответ понятен и релевантен.