HTML / CSS - 2 колонки, верхний край правой стороны влияет и на левую сторону

Question

Вот моя простая наценка:

<div style="width:200px">
    <div style="width:50%;float:left;">
        left side
    </div>
    <div style="margin-left:50%;width:50%;margin-top:10px;">
        right side
    </div>
</div>

Проблема в том, что margin-top: 10px;с правой стороны также отталкивает левую сторону.Что мне здесь не хватает?это ожидается?Я хотел бы настроить свойства верхнего поля слева и справа независимо

Answer 1

Это называется свертыванием полей, и на самом деле происходит то, что, поскольку внешний div (width:200px) пуст, он берет свое дочернее поле и использует его вместо дочерних ... так что контейнер опускается на 10px и так внутри него расположены левые / правые элементы div.

"выражение рушится поля означает, что прилегающие поля (нет непустой контент, отступы или границы участки или клиренс отделяют их) от две или более коробки (которые могут быть следующими друг к другу или вложенные) объединить в образует единое поле. "

если вы дадите ей границу, вы увидите, что она работает как положено .. demo

Answer 2

Есть несколько вещей, которые вы можете сделать.Происходит то, что поле правого элемента div влияет на положение содержащего элемента div для обоих, что и подталкивает левый вниз.Я считаю, что это ожидаемое поведение.Любой из них может работать:

1. Установите содержащий div на float: left
2. Счетчик действует на правый div, устанавливая поле -10px на содержащем div или на левом div.

Answer 3

Попробуйте добавить div, оборачивающий два столбца, а также правую часть div