There is a paragraph that I want to indent inside the blue sheet with the help of the margin. Initially, it looks like this:

initially

After the change:

after edits

Why does he touch the whole sheet? I need it to just indent for a paragraph.

My code is:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .content { width: 960px; height: 1500px; background: #a7cae6; margin: auto; padding-left: 16px; padding-right: 16px; max-width: 100%; } #paragraph { width: 420px; height: auto; } body { background-position: 132px 132px; background-repeat: no-repeat; } img { max-width: 100%; height: auto; } 
 <div class="wrapper"> <div class="header"> <img src="img/header2.png" class="img-responsive"> </div> <div class="content"> <p id="paragraph">Элмо Кеннеди О'Коннор,известный как <br>Bones — парень, который менее, чем <br>за год, стал легендой андеграунд рэпа. <br>Родился 11 января 1994 года в <br>Мьюир Бич, штат Калифорния. В 7 лет <br>переехал с родителями в Хауэлл, штат <br>Мичиган, где жил до 16 лет. </p> </div> </div>

  • Please provide all the code in question, not in the screenshots. Well, or in fidle at least. - Duck Learns to Take Cover

3 answers 3

margin is an external indent

padding is internal

so you have such a bjaka

 * { margin: 0; padding: 0; } .content { width: 960px; min-height: 150px; background: #a7cae6; margin: auto; padding: 13px; max-width: 100%; } #paragraph { width: 370px; height: auto; text-align: justify; margin: auto; } img { display: block; width: 100%; height: auto; } 
 <div class="wrapper"> <div class="header"> <img src="http://obsudi.net/wp-content/uploads/2016/02/1446484549-658.jpg" class="img-responsive"> </div> <div class="content"> <p id="paragraph">Элмо Кеннеди О'Коннор,известный как Bones — парень, который менее, чем за год, стал легендой андеграунд рэпа. Родился 11 января 1994 года в Мьюир Бич, штат Калифорния. В 7 лет переехал с родителями в Хауэлл, штат Мичиган, где жил до 16 лет. </p> </div> </div>

It's a classic

First, about the collapse of otsupov. This effect is observed when the block elements located next to each other vertically, the indents are not added together, but are combined with each other. The collapse itself acts on two or more blocks (one can be inserted inside the other) with indents from the top or bottom, while adjacent adjoints are combined into one. This effect only works for blocks that have no fields or borders. For left and right indents, a collapse is never applied.

Despite the mysteriousness, the collapse has a purely practical value and is primarily intended for the correct display of the text. The distance between paragraphs (the <p> ) without collapsing will double, while the upper indent of the first paragraph and the lower indent of the last paragraph will remain unchanged. The collapse ensures that the paragraph distance is the same everywhere.

The rules for calculating a single indent vary depending on a number of conditions, so there is a difference between the positive and negative values ​​of the indent, the parent and the child.

What you have. Suppose that in the lower block is a child element, which has an upper indent. From the block model, it follows that such an indent shifts the child downward relative to the top edge of the parent. However, taking into account the collapsing indents, the result will be different. The indent will go out of the block and set the distance between the upper block and the parent element.

    Because margin collapse .

    Alternatively, you can add border content.