Что делать если margin одного блока сталкивает другие?

Question

Я хочу зелёный блок подвинуть вниз с помощью margin, но вместе с ним двигается и оранжевый блок. Что делать?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1100px;
            height: 150px;
            margin: 0 auto;
            background-color: blue;
        }
        .orange-block {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: orangered;
        }
        .green-block {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 20px 0 0 44px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="orange-block"></div>
        <div class="green-block"></div>
    </div>
</body>
</html>

Answer 1

Вы можете использовать flex для родительского контейнера, если хотите выставить блочные элементы горизонтально.

   * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1100px;
            height: 150px;
            margin: 0 auto;
            background-color: blue;
         display: flex;
        }
        .orange-block {

            width: 100px;
            height: 100px;
            background-color: orangered;
        }
        .green-block {  

            width: 100px;
            height: 100px;
            background-color: green;
            margin: 30px 0 0 44px;            
        }

    <div class="main">
        <div class="orange-block"></div>
        <div class="green-block"></div>
    </div>

Ну или если есть необходимость использовать inline-block, то можно сместить блок при помощи transform: translate()

   * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1100px;
            height: 150px;
            margin: 0 auto;
            background-color: blue;

        }
        .orange-block {
                  display: inline-block;      
            width: 100px;
            height: 100px;
            background-color: orangered;
        }
        .green-block {            
            width: 100px;
            height: 100px;
            background-color: green;
                 display: inline-block;      
            transform: translateY(30px);            
        }

    <div class="main">
        <div class="orange-block"></div>
        <div class="green-block"></div>
    </div>

БЛОГ НА HUSL

Что делать если margin одного блока сталкивает другие?

Ответы (1 шт):