Вопрос по CSS. Пишу разметку:
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin: 0px;
padding: 0px;
}
#one {
width: 1200px;
height: 100px;
margin: 10px;
background-color: red;
}
#two {
width: 1500px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
Когда левый и правый margin не равны auto и width не равна auto, то сначала ставится левый margin, потом располагается содержимое с указанной шириной width , а правый margin сбрасывается в auto и подгоняется под ширину содержимого блока-родителя.
Как мне получить реальный правый margin? Написано, что он 10 пикселей, но видно, что там намного больше - оранжевым подсвечено. window.getComputedStyle() дает 10 пикселей ширины.
Почему браузер в моем примере врет и говорит, что правый маргин 10 пикселей, хотя там все 50 пикселей?
В данной ситуации у меня margin-left
не auto
, margin-right
не auto
и ширина не auto
- в такой ситуации браузер должен сбросить margin-right
в авто. Ширина поля справа будет определена в соответствии с правилом о том, что значение auto ДОПОЛНЯЕТ общую ширину элемента до ширины его блока-контейнера. источник - Эрик Мейер "css подробное руководство", страница 197
var one = document.getElementById('one');
one.parentElement.getBoundingClientRect().right
- эта штука работает относительно области просмотра. если прокрутить горизонтальную полосу прокрутки, то значения меняются. one.parentElement.getBoundingClientRect().right
- это "дай мне расстояние от левого края вьюпорта до правого края боди"
margin
равен10px
... – Yuri 23 янв '17 в 21:27