Как задать margin для div чтобы он корректно отображался?

Question

[nu_hot_etot_nik_svoboden]

Добрый день. Вот, изучаю CSS и HTML, для тренировки решил сделать калькулятор.

Возникли сложности.
Вот один из моих вариантов.
https://jsfiddle.net/Lgonx5vf/

Мне не понятно, почему я задаю у кнопок margin:0px 0px 5px 5px;
А в результате отсуп всё равно разный? Прочитал про схлопывание margin, но тут вроде схлопываться нечему, между 0 и 5px должен быть результат 5px!?
С кнопкой "=" я немного запутался, хотел сделать один элемент пустым, а кнопкой "=" перекрыть его. Или как можно сделать проще?

Ещё пробовал сделать как таблицу, но смущает, что заданные ширина и высота кнопки не соблюдаются на итоговой странице. Решил поискать готовые решения в интернете, там такая же ерунда:
https://codepen.io/MooMee/pen/RgobLj
Я пересмотрел десятки примеров калькуляторов, но везде есть какая-то костыльность. Можете поделиться ссылкой на "образец"?

Так же вопрос по книге "Новая большая книга CSS Дэвид Макфарланд", насколько она актуальна в данный момент?
Где можно изучить CSS более подробно с его особенностями.

Answer 1

[mikeyuriev]

Перенос строки между элементами считается за пробел. Поэтому у вас пробел между div'ами. Можете установить font-size: 0; у родителя (.calculator_keyboard) и вернуть font-size: 16px; (или сколько надо) у детей (.calculator__btn). Или склеить всех детей комментариями:

<div class="calculator__btn">C</div><!--
--><div class="calculator__btn">D</div>

Ну или вообще убрать перенос строки между ними.

Answer 2

[Максим]

если не понимаете то пишите так : margin-top, margin-right,margin-bottom,margin-left - это тоже самое что и margin: 0 0 5px 5px;