Почему текст 3 отобразился так низко?
Текст 3 должен отображаться под текстом 2
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Услуги Бухгалтера</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1 class="header">Текст 1</h1> <h1 class="header-title">текст 2</h1> <h2 class="header-subtitle">текст 3</h2> </header> </body> </html> |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Услуги Бухгалтера</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1 class="header">Текст 1</h1> <h1 class="header-title">текст 2</h1> <h2 class="header-subtitle">текст 3</h2> </header> </body> </html>
* { box-sizing: border-box; text-decoration: none !important; font-family: cursive; } body { margin: 0; padding: 0; border: 0; font-family: 'Montserrat', sans-serif; } header { background-image: url("fon.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .header { margin-top: 0; padding-top: 7px; padding-bottom: 6px; position: relative; display: flex; flex-direction: column; color: #e2f2f6; background-color: #17262f; align-items: center; margin-bottom: 5px; } .header-title { width: 100%; height: 100vh; position: relative; display: flex; flex-direction: column; color: #104769; align-items: center; font-size: 30px; } .header-subtitle { margin-top: 0; font-size: 32px; text-align: center; color: black; margin: 0; margin-bottom: 70px; } |
* { box-sizing: border-box; text-decoration: none !important; font-family: cursive; } body { margin: 0; padding: 0; border: 0; font-family: 'Montserrat', sans-serif; } header { background-image: url("fon.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .header { margin-top: 0; padding-top: 7px; padding-bottom: 6px; position: relative; display: flex; flex-direction: column; color: #e2f2f6; background-color: #17262f; align-items: center; margin-bottom: 5px; } .header-title { width: 100%; height: 100vh; position: relative; display: flex; flex-direction: column; color: #104769; align-items: center; font-size: 30px; } .header-subtitle { margin-top: 0; font-size: 32px; text-align: center; color: black; margin: 0; margin-bottom: 70px; }
Дополнительно:
Не бывает такой структуры заголовков. По логике.
Последний так низко, потому что у второго заголовка зачем-то задана высота. Причем огромная.
Ответы:
Потому что у .header-title стоит height: 100vh;
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы понять, почему текст 3 отобразился так низко на странице, нужно проанализировать различные возможные причины:
1. CSS стили: Возможно, что для элемента содержащего текст 3 были применены определенные CSS стили, такие как отступы (margin), паддинги (padding) или позиционирование (position), которые могут привести к его смещению вниз. Проверьте CSS код, который применяется к этому элементу.
2. Родительские элементы: Также стоит обратить внимание на родительские элементы. Если у родительского элемента установлены какие-либо свойства, которые могут влиять на позиционирование дочерних элементов, это также может быть причиной смещения текста 3.
3. Высота элемента: Если высота элемента, содержащего текст 3, задана явно и она меньше, чем высота содержимого, то текст может отображаться ниже из-за переполнения. Проверьте высоту элемента и его содержимого.
4. JavaScript: Если на странице присутствует JavaScript код, он также может влиять на позиционирование элементов. Проверьте возможные скрипты, которые могут изменять расположение текста 3.
5. Браузер: Иногда различные браузеры могут по-разному интерпретировать CSS и HTML код, что может привести к различиям в отображении элементов. Проверьте отображение в разных браузерах.
Если после анализа перечисленных выше возможных причин проблема так и не решится, попробуйте создать минимальный пример кода (минимальное воспроизводимое пример), чтобы сообщить о проблеме на форуме или задать вопрос специалистам для получения более точного ответа.