А как понять где ставить padding, html css

@Vlad333 · Регистрация: 02.04.2017

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

Друзья подскажите как понять где нужно ставить тег padding в каких случаях он применяется и как понять что настал тот случай что надо вставить тег padding, -как я понял что это внутренний отступ. Но относительно чего это внутренний отступ? Относительно контейнера div где находится этот тег padding? или это отступ между картинкой лого и тестом снизу лого. Туда надо padding вставлять?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="assets/CSS/style.css">
</head>
<body>
    <div class="main">
        <div class="heder">
            <div class="heder_logo">
                <p><img src="assets/img/logo.jpg" alt="logo"></p>
                    <div class="heder_text">
                        <h1>Название компании</h1>
                        <h2>Для эксперимента</h2>
                    </div>
            </div>
        </div>
    </div>
    
</body>
</html>

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
 * {      /* задаем стиль для всех элементов хедер футер параграфы не хотим чтоб были отступы по краям*/
    margin: 0;
    padding: 0;
}
 
.heder {
background-color: #e09982;/*задаем цвет*/
height: 177px; /*задаем высоту див блока*/
font-size: 0.8em; /*задаем размер шрифта*/
margin-left: 0px; /*задаем внешний отступ с лева*/
margin-right: 0px;/*задаем внешний отступ с права*/
min-width: 900px;/*минимальная ширина*/
}
 
.heder_logo p img{
 
 
width: 150px;
margin-left: 100px;
margin-top: 15px;*/
}
 
.heder_text {
    
    margin-left: 45px;
margin-top: 10px;
}
 
.heder_text h1, .heder_text h2 {
    font: normal 150% 'century gothic', arial, sans-serif;
    margin: 0 0 0 25px;
    letter-spacing: 0.1em;
}
 
.heder_text h1 {
    margin-bottom: -7px;
}

@DrType · 01.06.2020, 12:53

Vlad333, предлагаю Вам для наглядности задать для .heder и .heder_text границы: border:thin solid red. Теперь будет видно, что если задать padding для контейнера .heder, то поля появятся у .heder, логотип и текст будут отступать от границ контейнера, но при этом попрежнему будут примыкать друг к другу. Если задать padding для .heder_text, то .heder_text попрежнему будет примыкать вплотную к логотипу, но внутри .heder_text появятся поля.
padding это не тег, сами понимаете.
Вообще говоря, padding задаёт внутренние отступы от границ блока до внешних границ предполагаемого контейнера с его содержимым, как-то так.

Добавлено через 3 минуты
Чтобы лого и картинка отстояли друг от друга, надо использовать не padding, а margin.

Добавлено через 9 минут
У каждого блока есть 1) область содержимого — у контейнера .heder_logo она заключает в себе абзац с логотипом и блок с текстом — 2) поля и 3) границы. padding следует изменять в тех случаях, когда поля слишком узкие (или слишком широкие) и содержимое прилипает к границе, что затрудняет восприятие и некрасиво. Для отступов между блоками следует использовать margin.

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	01.06.2020, 12:53
	Сообщение было отмечено Vlad333 как решение Решение Vlad333, предлагаю Вам для наглядности задать для .heder и .heder_text границы: `border:thin solid red`. Теперь будет видно, что если задать `padding` для контейнера .heder, то поля появятся у .heder, логотип и текст будут отступать от границ контейнера, но при этом попрежнему будут примыкать друг к другу. Если задать `padding` для .heder_text, то .heder_text попрежнему будет примыкать вплотную к логотипу, но внутри .heder_text появятся поля. `padding` это не тег, сами понимаете. Вообще говоря, `padding` задаёт внутренние отступы от границ блока до внешних границ предполагаемого контейнера с его содержимым, как-то так. Добавлено через 3 минуты Чтобы лого и картинка отстояли друг от друга, надо использовать не padding, а `margin`. Добавлено через 9 минут У каждого блока есть 1) область содержимого — у контейнера .heder_logo она заключает в себе абзац с логотипом и блок с текстом — 2) поля и 3) границы. `padding` следует изменять в тех случаях, когда поля слишком узкие (или слишком широкие) и содержимое прилипает к границе, что затрудняет восприятие и некрасиво. Для отступов между блоками следует использовать `margin`. 1

А как понять где ставить padding, html css

Решение