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

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

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

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

Войти через центр авторизации

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

CSS

Простой
Как удалить все префиксы из css?
- 1 подписчик
- 3 часа назад
- 44 просмотра
1

ответ
HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 15 часов назад
- 59 просмотров
1

ответ
CSS

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

ответов
JavaScript

+1 ещё

Простой
Галерея через сборку строки JS не позиционируется?
- 1 подписчик
- вчера
- 80 просмотров
0

ответов
CSS

Простой
Как сверстать не стандартный макет?
- 1 подписчик
- вчера
- 79 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- вчера
- 32 просмотра
1

ответ
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 03 мая
- 88 просмотров
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхний угол?
- 3 подписчика
- 03 мая
- 482 просмотра
0

ответов
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- 02 мая
- 191 просмотр
0

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Сделать бота

06 мая 2024, в 10:17

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

Оцифровать снимки карт и нанести слоями на карту в Qgis

06 мая 2024, в 10:10

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

Развернуть DJANGO проект на сервере

06 мая 2024, в 10:02

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

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

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

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

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