Заголовок (h1) занимает много места справа

По какой-то причине, как видно на скриншоте, h1 (discordbotgen) занимает много места справа, хотя это не указано в моем css. Я не хочу, чтобы он занимал это место, так как он блокирует попадание туда других элементов.

.main-title {
  font-family: 'Comfortaa', cursive;
  font-size: 80px;
  color: #ededed;
  margin-bottom: 50px;
  margin-left: 150px;
  margin-top: 180px;
}

<h1 class = "main-title">discordbotgen</h1>

У h1 нет родительских разделов, его родителем является <body>.

вам нужно прочитать о блочном элементе и встроенном элементе

— 04.02.2019 16:35

Заголовки всегда будут занимать всю ширину своего контейнера. Я бы предложил обернуть его в div и обработать положение с помощью этого div.

— 04.02.2019 16:35

html css

04.02.2019 16:33

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

584

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

По умолчанию <h1> является элементом блочного уровня. Он будет занимать всю ширину своего контейнера, если вы не укажете, что это inline-block.

h1 {
  background: #f2f2f2;
}

<h1>Block Element</h1>

h1 {
  background: #f2f2f2;
  display: inline-block;
}

<h1>Block Element</h1>

04.02.2019 16:36

Ответ принят как подходящий

<h1> по умолчанию является блоком отображения - он будет занимать всю ширину содержащего его элемента. Вы можете плавать или использовать inline-block, чтобы изменить эту функциональность.

p.s. Если вы используете поплавки, не забудьте использовать clearfix. Клирфикс

04.02.2019 16:36