Как мне получить реальный правый margin?

383

26 января 2017, 03:26

Вопрос по 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 - это "дай мне расстояние от левого края вьюпорта до правого края боди"

Answer 1

По умолчанию div имеет стиль display:block. Это значение заставляет браузер делать перенос строк в начале и в конце содержимого. Фактически, это означает, что справа от блока не должно быть элементов.

Margin в принципе — это отступ, а не какая-то определенная зона. Отступы могут объединяться с соседними отступами, выходить за пределы родительских элементов, т.е. вести себя не как padding или border. Попробуйте так-же указать отрицательный margin (да, такое можно).

Исходя из этого, что выгоднее показать в девтулс: ваш 10px отступ, или то, что справа от блока не должно быть элементов?

Если вы установите display:inline-block, что позволяет блокам оказываться на одной строке, и тогда в девтулс вы увидите ваш 10px отступ.

div { 
  margin: 30px; 
  width: 50px; 
  height: 50px; 
  background: red; 
  display:inline-block 
}

<div> 
</div>

Answer 2

В простейшем случае можно так:

~function () { 
  var one = document.getElementById('one'); 
  var res = one.parentElement.getBoundingClientRect().right - one.getBoundingClientRect().right; 
  console.log(res) 
}()

* { 
  margin: 0px; 
  padding: 0px; 
} 
 
#one { 
  width: 200px; 
  height: 50px; 
  margin: 10px; 
  background-color: red; 
} 
 
#two { 
  width: 400px; 
  height: 50px; 
  background-color: green; 
}

<div id="one"></div> 
<div id="two"></div>

function getMR() { 
  var one = document.getElementById('one'); 
  var res = one.parentElement.getBoundingClientRect().right - one.getBoundingClientRect().right; 
  console.log(res); 
} 
 
document.getElementById('log').addEventListener('click', getMR); 
getMR();

* { 
  margin: 0px; 
  padding: 0px; 
} 
 
#one { 
  width: 200px; 
  height: 50px; 
  margin: 10px; 
  background-color: red; 
} 
 
#two { 
  width: 4000px; 
  height: 50px; 
  background-color: green; 
} 
 
#log { 
  position: fixed; 
  right: 8px; 
  top: 8px; 
  padding: .25em 1em; 
}

<div id="one"></div> 
<div id="two"></div> 
<button id="log">Log</button>

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не отображаются пиктограммы visual components wordpress

Отображаются пиктограммы з большой задержкою, или не отображаются вообщеhttp://prnt

360

CSS

Замена иконок Bootstrap [требует правки]

вместо <i class="fa fa-filter icon icon-field"></i> надо свои иконки поставить

370

c++

C++ вызов функции от переменной

Как вызвать ф-ию, с переменной в C++, вот пример

380

c++

Какого типа `1.`?

В такой программе на Си

351