Padding vs margin, какая разница?

Question

Maks Burkov @Maks00088

Обучаюсь Java/JavaEE /Php/Js

HTML
CSS

Padding vs margin, какая разница?

Как правильно нарезать данную структуру ? Немогу понять как работают padding и margin .. Насколько я понял :
margin - внешний отступ
padding - внутрений отступ

Не смотря на понимание этого появляется не понятное поведение при попытке сдвинуть по центру данный блок , из данной картины надо сдвинуть по центру внутрений чёрны блок .. Использовать падингы и марджины ? При добавки падинга он выходит за зону внешнего блока почему ? Что обычно используется для правильного позиционирования вложенных блоков ?

Когда начинаю добавлять в margin 30++ px , начинает уходить вниз за внешний красный блок ..

#navigationBlock {

    margin:30px;
    border:solid black;
    width:50%;
    max-width:50%;
    min-width:50%;

}

После padding:10px ++ начинает уходить вниз за красный блок .

#navigationBlock {

    padding:10px;
    border:solid black;
    width:50%;
    max-width:50%;
    min-width:50%;

}

Вопрос задан более трёх лет назад
397 просмотров

1 комментарий

Подписаться 1 Оценить 1 комментарий

Maks Burkov @Maks00088 Автор вопроса

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CouponSystem</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>

<div id="headerContainer">
    <h5>Find the service you like from everywhere! </h5>
    <div id="navigationBlock">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Register</a></li>
            <li><a href="#">ContactUs</a></li>
            <li><a href="#">AboutUs</a></li>
        </ul>
    </div>
</div>

</body>
</html>

#headerContainer {

    padding:10px;
    border: solid red;
    width: 100%;
    max-height:150px

}

#navigationBlock {

    padding:10px;
    border:solid black;
    width:50%;
    max-width:50%;
    min-width:50%;

}

#navigationBlock > ul > li > a{
    color: goldenrod;
    padding: 20px;
}

#navigationBlock > ul > li{
    display: inline-block;

}

h5 {
    position: relative;
    text-align: right;
    padding-right: 20%;
    color: goldenrod;
    font-family: Gabriola;
    font-size: larger;
}

Написано более трёх лет назад

Решения вопроса 1

2 комментария

Maks Burkov @Maks00088 Автор вопроса

Добавил код в коментарий..

Написано более трёх лет назад

ThunderCat @ThunderCat Куратор тега CSS

Maks Burkov:

#headerContainer {

    padding:10px;
    border: solid red;
    width: 100%;
    max-height:150px;
    margin: auto;
}

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 5 часов назад
- 32 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 16 часов назад
- 81 просмотр
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 72 просмотра
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 32 просмотра
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 102 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 93 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 90 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

3д сцены

23 дек. 2024, в 04:30

10000 руб./за проект

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CouponSystem</title> <link rel="stylesheet" href="../css/index.css"> </head> <body> <div id="headerContainer"> <h5>Find the service you like from everywhere! </h5> <div id="navigationBlock"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> <li><a href="#">ContactUs</a></li> <li><a href="#">AboutUs</a></li> </ul> </div> </div> </body> </html>

#headerContainer { padding:10px; border: solid red; width: 100%; max-height:150px } #navigationBlock { padding:10px; border:solid black; width:50%; max-width:50%; min-width:50%; } #navigationBlock > ul > li > a{ color: goldenrod; padding: 20px; } #navigationBlock > ul > li{ display: inline-block; } h5 { position: relative; text-align: right; padding-right: 20%; color: goldenrod; font-family: Gabriola; font-size: larger; }

Answer 1 · 2017-04-20 14:17:47

ну, кодом и цсс можно было бы и поделиться, а так - стандартной практикой является проверка в инспекторе что и как лежит, есть подозрение что верхний правый блок "файнд сервис лалала" мешает вашему блоку сместиться правее, короче без кода это гадание на скринах, в них я не силен.

В целом читайте по теме побольше, если реально собираетесь работать с этим, такие вопросы слишком нубские даже для джуна, срочно качайте скилл. Вот тут достаточно четко объясняется как работает блочная верстка.

Answer 2 · 2017-04-20 14:42:48

вопросы широкие.

width:50%;
max-width:50%;
min-width:50%;

max-min с одинаковыми размерами не имеют смысла

Padding vs margin, какая разница?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт