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%;

}

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

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

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

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

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

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

JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 14 минут назад
- 10 просмотров
0

ответов
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 6 часов назад
- 70 просмотров
0

ответов
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 22 часа назад
- 59 просмотров
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- вчера
- 30 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 51 просмотр
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 97 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 71 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 42 просмотра
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Нужен верстальщик. Переверстать, доверстать, доработать интерфейс

22 нояб. 2024, в 16:13

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

Доработка и исправление ошибок в работе Личного кабинета сайта

22 нояб. 2024, в 15:59

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

Рефакторинг vue.js/nest.js интерфейса у админки

22 нояб. 2024, в 15:50

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

<!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, какая разница?

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

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

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