CSS question. I am writing markup:

<!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>

I get it: enter image description here

When the left and right margin are not equal to auto and the width is not equal to auto, then the left margin is set first, then the content with the specified width is placed, and the right margin is reset to auto and adjusted to the width of the content of the parent block.

How do i get a real right margin? It is written that it is 10 pixels, but it can be seen that there is much more - it is highlighted in orange. window.getComputedStyle () gives 10 pixels width.

Why does the browser in my example lie and say that the right margin is 10 pixels, although there are all 50 pixels there?

In this situation, my margin-left not auto , the margin-right not auto and the width is not auto - in such a situation the browser should reset the margin-right to auto. The width of the field to the right will be determined in accordance with the rule that the value of auto COMPLETES the total width of the element to the width of its container block. source - Eric Meyer "css detailed guide", page 197

 var one = document.getElementById('one');

one.parentElement.getBoundingClientRect().right - this item works relative to the viewport. if you scroll the horizontal scroll bar, the values ​​change. one.parentElement.getBoundingClientRect().right is "give me the distance from the left edge of the viewport to the right edge of the body" enter image description here

  • So this is not the right margin (the width of the block of the skin color - the width of the purple block - the left margin) which in this case is larger than the right margin. Also add that the code in question does not demonstrate the problem in any way. - Duck Learns to Take Cover
  • on the screen left margins just did not fit. on the left, too, the orange strip. Now I will correct the picture. The top block is generally red. it turned out to be purple because I selected it in devtuls - red + blue = purple. the contents of the block are blue, the padding is yellow, the margin orange is even on a small block block image - Dimon
  • Your margin is 10px ... - Yuri
  • the right margin is not equal to 10 pixels — visually it is about 50 pixels. look at the picture. 10 pixels is the top, left and right margins - Dimon
  • I realized. the difference doesn’t matter where the point of reference is - Dimon

2 answers 2

By default, the div has a display:block style. This value causes the browser to wrap lines at the beginning and at the end of the content. In fact, this means that there should be no elements to the right of the block.

Margin in principle is an indent, not some particular zone. Indents can be combined with adjacent indents, go beyond the parent elements, i.e. behave not like padding or border . Try to also specify a negative margin (yes, this is possible).

Based on this, what is more advantageous to show in devtuls: is your 10px indent, or that there should not be any elements to the right of the block?

If you set display:inline-block , which allows blocks to appear on one line, and then in devtuls you will see your 10px indent.

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

  • You can specify a negative margin, but it’s as if banks used negative percentages - the old year 2002, to put it bluntly, with the current browser support - is a trouble. - VostokSisters
  • @VostokSisters negative margin is defined in the specification: “Negative values ​​for margin properties are allowed” - Crantisz

In the simplest case, you can:

 ~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>

  • What is this record ~ ​​function () {...} ()? never seen such a thing - Dimon
  • @Dimon, the usual self-invoking function to limit skoup :) - Qwertiy ♦
  • ~ - this sign embarrassed - Dimon
  • @Dimon, it happens often))) - Qwertiy ♦
  • one
    @Dimon, but I derive the difference, not this value. Yes, they depend on the visible area, but they both equally depend on it and the difference does not change. What is not happy? - Qwertiy ♦