Hey.

CSS question. Posted markup:

* { margin: 0px; padding: 0px; } #one { width: 100%; height: 100px; margin: 10px; background-color: red; } #two { width: 1500px; height: 100px; background-color: green; } 
 <div id="one"></div> <div id="two"></div>

If you open this case in devtuls, you can see it: enter image description here

I do not understand why there is no right margin for the red block, although it is written in the block model that margin-right: 10px ?

Why is the lower and upper margin short? It is seen that they do not reach the right edge of the red block.

enter image description here

In my example, the red block got out of the body and was not cropped, since I did not specify overflow:hidden

    3 answers 3

    Because the width is set to 100%. Block element by default and so 100%. You have 100% calculated from the size of the parent, and this is the entire width of the body.

    Remove from #one 100%, well, there’s no need to html with the body.

    And it is even better not to use browser-style zeroing with a similar method.

    Read here: https://habrahabr.ru/post/45296/

    • what have the width of the content ?. The question is why there is no right margin. in general, the default block element is width: auto - Dimon
    • Remove width: 100%; at #one Because the browser considers from the left to the right. Your left indent is 10px narrower and the width is like that of the parent. Add to body {owerflow: scroll; } It will be clearer. - Frontendman
    • no need to remove anything. I already know that if the margins are set on the right and left, and the view in the car is set, the width of the content will be adjusted so that, together with the left and right margins, fill the contents of the parent completely. the question is why in this case there is no right margin and why the upper and lower margins do not reach the right edge of the red block - Dimon
    • He does not have enough space on the screen. - Frontendman
    • @Dimon there is a right margin . Both the top and bottom indents are correctly displayed. The thing is that you get 10 pixels indent on the left + 100% block width + 10 pixels indent on the right. At the resolution of the parent block in 1000px, you will get a total width of 1020px. In this case, the block itself will be shifted relative to the parent by 10px right, which is evident on your screenshot. - Alexey Giryayev

    Here is your code for clarity:

     body { margin: 0px; padding: 0px; } #one { width: 50%; height: 100px; margin: 10px; background-color: red; float: left } #one_plus { width: 20px; height: 100px; background-color: black; float: left } #two { width: 100%; height: 100px; background-color: green; float: left } 
     <div id="one"></div> <div id="one_plus"></div> <div id="two"></div>

    As you can see, there is an indent. But when you make the width of the first block 100%, it uses the width of the parent window and shifts to the right because of the margin-left . This block is outside the parent block. Naturally, this will not show the indent to the right.

    So do the blocks in your example:

    enter image description here

    • "This block extends beyond the parent block. Naturally, this will not show the indent to the right." - I do not understand why this will not see the indent on the right. that the red block goes beyond the body - this is understandable - Dimon
    • And how will the indent be seen if even a piece of the block itself is not visible? If you want it to be inscribed in the body and have indents to the side, you need to do markup otherwise. - Alexey Giryayev
    • a piece of the block will not be visible only when these three divas are put in the block container, which is set overflow: hidden. and in my example, the red block got out of the body and was not cropped, since I did not specify overflow: hidden. I added a picture that shows it in a question - Dimon
    • I think the answer is this: if an overflow occurred, for example, block 1 got out of parent-block 2, then none of the other blocks in the document "sees" the blocking part of block 1, the crawled part can overlap with other blocks. and since no one sees, it makes no sense at all to display margins, which are used to create gaps between the frames of the blocks. that is, there is a margin, but the browser simply does not display it, because there is no point - part of the block crawled out of the parent block, and other blocks did not see the crawl part and margin is also not seen - Dimon
    • I hope you understand what you write. But I did not understand anything at all. margin creates an indent outside the block. Outside of <body> neighboring elements will not be displayed, and therefore the indent is not visible there. He is simply not needed there. - Alexey Giryayev

    1. Horizontal formatting formula for a block element:

      width (parent) = margin-left (descendant) + border-left (descendant) + padding-left (descendant) + width (descendant) + padding-right (descendant) + border-right (descendant) + margin-right (descendant )

    2. When the left margin-left is not auto, the width is not auto and the margin-right is not auto, then the margin-right is reset to zero to add the desired length using the formula.

    3. In this example, there is no frame and paddingov.

    According to this formula:

    1097 pixels = 10 pixels + 1097 pixels + x

    x = -10 pixels, that is, the right margin is equal to -10 pixels . The browser is lying when it says that the right margin is 10 pixels