CSS: изменение полей дочернего элемента в Родительском контейнере изменяет ширину дочернего элемента?

Я пытаюсь понять заполнение, поля и отрицательные поля в CSS, и я создал код ниже, чтобы увеличить мое понимание.

Я попытался добавить поле в свой класс «row», и на основе моих базовых знаний о полях в CSS я ожидал, что произойдет следующее:

  • Положительная маржа-слева от 20px будет толкать мой div с классом» row » 20px влево.
  • Отрицательное поле-слева от 20px будет толкать мой div с классом» row » 20px вправо.

Однако этого не происходит. На самом деле происходит следующее:

  • Positive margin-left уменьшает ширину моего div с классом » row » с 20px слева.
  • Отрицательное поле-слева увеличивает ширину моего div с классом » row » с 20px слева.

Теперь у меня такое чувство, что это потому, что мой div с классом «row» является дочерним div с классом «container». Однако я не понимаю, почему такое поведение происходит. Я надеюсь, что кто-нибудь может помочь!

Спасибо!

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.container {
    width: 200px;
    height: 200px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: red;
}

.row {
    margin-left: 20px;
    background-color: yellow;
}

.row::after {
    content: "";
    display: block;
    clear: both; 
}

.col { 
    background-color: blue;
    float: left; 
    width: 20%;
}

</style>
    <title>Margintest</title>
</head>
<body>
<div class = "container">
    <div class = "row">  
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>

    </div>
</div>

</body>
</html>
Метки

3 ответа

  1. Это вызвано не тем, что div является дочерним элементом другого div, а тем, что вы не задаете определенную ширину rowdiv.
    Без заданной ширины ширина равнаauto, что означает: использовать ширину родителя, вычитаемую по ширине полей, отступов и т.д.

    Это проясняет ситуацию?

  2. Margin-это пространство вокруг элемента. Так

    margin-left: 20px;
    

    означает «Я хочу 20px пространства на левой стороне моего элемента». Таким образом, элемент перемещается вправо.
    Поле не уменьшает ширину элемента в целом.

    В вашем случае это так. Но только потому, что ваш контейнер установлен на фиксированную ширину 200px. Элемент row пытается заполнить это пространство. Таким образом, без маржи он также будет шириной 200px. Если между строкой и контейнером есть пространство (размер которого не меняется), ширина строк уменьшается.

  3. Короткий ответ:

    Извините за мой плохой рисунок

    (Извините за мой плохой рисунок)

    Длинный ответ:

    Кажется, у вас есть какое-то недопонимание маржи. Поле дает элементу прозрачное пространство / область вне его границы.

    В вашем примере левая граница rowпоказана как синяя линия (ну, не полностью вниз). А запас rowхода у него правый 20px.

    Вы можете узнать больше о полях и отступах здесь: