Непонятные отступы слева

@Sonicos · Регистрация: 07.11.2014

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Тренируюсь в вёрстке, и столкнулся вот с чем. На скрине в правом элементе видно, что у текста отступы от левого края блока. При чём, у Title один отступ, у текста под ним отступ по-меньше. А вот кнопка отображается, как задумано.
margin, padding я не указывал. Эти отступы присутствуют и при использовании Flex и при Grid.
Что это может быть?

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<main class="page">
            <div class="page__block-1">
                <div class="block-1__container _container">
                    <div class="block1__content _content">
                        <div class="content__item block-1__img"><img src="img/decor/1_grl.png" alt="Картинка">
                        </div>
                        <div class="content__item right-side-item">
                            <div class="content__title">Balance Your
                                Body and Mind</div>
                            <div class="content__text">Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</div>
                            <button class="button">join us now</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
body {
    font-family: "Open Sans";
    color: #484f5b;
}
.wrapper {
    min-height: 100%;
    overflow: hidden;
}
._container {
    max-width: 1351px;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: content-box;
    border: 1px solid #000;
}
._content {
    display: flex;
    align-items: center;
    padding: 86px 0;
}
.button {
    width: 203px;
    height: 50px;
    background: #e7c9c4;
    color: inherit;
    text-transform: uppercase;
    font-size: 21px;
    font-weight: bold;
}
.content__item {
    border: 1px solid #000;
}
.block-1__img img {
    max-width: 602px;
}
.content__title {
    font-size: 74.5px;
    font-weight: bold;
    letter-spacing: 0.75px;
    line-height: 1.3;
    text-align: left;
}
.content__text {
    margin: 66px 0 82px 0;
    font-size: 21px;
    font-weight: normal;
    letter-spacing: 0.21px;
    line-height: 1.57;
    text-align: left;
}

@Sonicos · 10.01.2022, 22:18 **[ТС]**

Забыл скрин сразу прикрепить. Исправляюсь )

@NTHing · 10.01.2022, 22:40

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

@Sonicos · 11.01.2022, 08:36 **[ТС]**

Ну да. Я к такому выводу и пришёл тоже, что проблема в шрифте. Пришлось добавлять отрицательные margin к этим блокам.

@NTHing · 11.01.2022, 09:48

Сообщение от Sonicos

Пришлось добавлять отрицательные margin к этим блокам.

Такой вариант не очень... А если первой буквой будет не "B", а "Y", то марджины обнулять будете? ))

@Sonicos · 11.01.2022, 10:35 **[ТС]**

Тоже верно))) Видимо, только мириться с этим остаётся.

Новые блоги и статьи Все статьи Все блоги /
Параллельное программирование с OpenMP в C++ NullReferenced 24.04.2025 Параллельное программирование — подход к созданию программ, когда одна задача разбивается на несколько подзадач, которые могут выполняться одновременно. Оно стало необходимым навыком для. . .	Цепочки методов в C# с Fluent API UnmanagedCoder 24.04.2025 Современное программирование — это не только решение функциональных задач, но и создание кода, который удобно поддерживать, расширять и читать. Цепочки методов и Fluent-синтаксис в C# стали мощным. . .	Мульти-тенантные БД с PostgreSQL Row Security Codd 23.04.2025 Современные облачные сервисы и бизнес-приложения всё чаще обслуживают множество клиентов в рамках единой программной инфраструктуры. Эта архитектурная модель, известная как мульти-тенантность, стала. . .	Реализация конвейеров машинного обучения с Python и Scikit-learn AI_Generated 23.04.2025 Мир данных вокруг нас растёт с каждым днём, и умение эффективно обрабатывать информацию стало необходимым навыком. Специалисты по машинному обучению ежедневно сталкиваются с задачами предобработки. . .	Контроллеры Kubernetes Ingress: Сравнительный анализ Mr. Docker 23.04.2025 В Kubernetes управление входящим трафиком представляет собой одну из ключевых задач при построении масштабируемых и отказоустойчивых приложений. Ingress — это API-объект, который служит вратами. . .
Оптимизация кода Python с Cython и Numba py-thonny 23.04.2025 Python прочно обосновался в топе языков программирования благодаря своей простоте и гибкости. Разработчики любят его за читабельность кода и богатую экосистему библиотек. Но у этой медали есть и. . .	Микросервис на Python с FastAPI и Docker ArchitectMsa 23.04.2025 В эпоху облачных вычислений и растущей сложности программных продуктов классическая монолитная архитектура всё чаще уступает место новым подходам. Микросервисная архитектура становится фаворитом. . .	Создаем веб-приложение на Vue.js и Laravel Reangularity 23.04.2025 Выбор правильного технологического стека определяет успех веб-проекта. Laravel и Vue. js формируют отличную комбинацию для создания современных приложений. Laravel — это PHP-фреймворк с элегантным. . .	Максимальная производительность C#: Span<T> и Memory<T> stackOverflow 22.04.2025 Мир высоконагруженных приложений безжалостен к неэффективному коду. Каждая миллисекунда на счету, каждый выделенный байт памяти может стать причиной падения производительности. Разработчики на C#. . .	JWT аутентификация в Java Javaican 21.04.2025 JWT (JSON Web Token) представляет собой открытый стандарт (RFC 7519), который определяет компактный и самодостаточный способ передачи информации между сторонами в виде JSON-объекта. Эта информация. . .

@Sonicos 2 / 2 / 3 Регистрация: 07.11.2014 Сообщений: 94
	10.01.2022, 22:18 [ТС]
	Забыл скрин сразу прикрепить. Исправляюсь ) Миниатюры 0

@NTHing 1807 / 953 / 385 Регистрация: 26.11.2014 Сообщений: 1,943 Записей в блоге: 1
	10.01.2022, 22:40
	Это так отображаются текстовые символы. У самого дива отступов нет. Поставьте диву фоновый цвет и увидите, что он прижат к левому краю. 0

@Sonicos 2 / 2 / 3 Регистрация: 07.11.2014 Сообщений: 94
	11.01.2022, 08:36 [ТС]
	Ну да. Я к такому выводу и пришёл тоже, что проблема в шрифте. Пришлось добавлять отрицательные margin к этим блокам. 0

@Sonicos 2 / 2 / 3 Регистрация: 07.11.2014 Сообщений: 94
	11.01.2022, 10:35 [ТС]
	Тоже верно))) Видимо, только мириться с этим остаётся. 0