Adding a border "pushes down" contents

Question

I have a p element with a paragraph of text inside a div element. Without a border on the div element, the p element is positioned in the top-left corner, but if I add a border to the div element it "pushes down" the paragraph from the top edge (not the left edge, however).

Why does this occur?, and is there a method of preventing this?

html,
body {
  height: 100%;
}

div {
  min-width: 300px;
  max-width: 500px;
  min-height: 200px;
  max-height: 450px;
  height: 100%;
  background-color: Pink;
}

div.first {
  border-width: 2px;
  border-style: solid;
  border-color: Black;
}

p {
  width: 75%;
  height: 75%;
  background-color: Black;
  color: White;
}

<div class="first">
  <p class="one">Paragraph one text...</p>
</div>
<div class="second">
  <p class="two">Paragraph two text...</p>
</div>

May not be relevant to your question but it's good to know that borders can be created using only one styling command: `border: 2px solid black;`. — Luicy, Feb 22 '18 at 22:14
See [Margin on child element moves parent element](https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element). — showdev, Feb 22 '18 at 22:29
@Luicy, thankyou for this; at the moment, when I learn new concepts, I am trying to write them out in the extended way, to try and reinforce them. — Jay Lin, Feb 22 '18 at 22:53

score 1 · Accepted Answer · answered Feb 22 '18 at 22:23

UPDATE:

You can prevent this movement by adding margin: 0; to the style of your p tag. See below for an explanation of how and why this happens.

The reason your p tag gets pushed down is because of margin collapsing (or, rather, margins not collapsing when you set a border).

See this page for a more in-depth explanation of how it works. From that page:

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Basically, your margins are getting collapsed by the browser when you don't have a border set, yet they are calculated when you do set that border.

For ways to prevent the browser from collapsing margins, see this question. From that question (first part originally quoted from this other question):

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:

.parent { padding-top: 1px; margin-top: -1px; }

This is perfect. I only thought of margin collapsing in terms of siblings, not a kind-of "overlap" between parent and child. Thanks so much. — Jay Lin, Feb 22 '18 at 22:51

score 1 · Answer 2 · answered Feb 22 '18 at 22:27

This is related to margin collapse.
The margin on the <p> element collapses with it's parent.

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Note that:

Adjoining vertical margins collapse... if and only if... no line boxes, no clearance, no padding and no border separate them.

In order to prevent margin collapse on both of your examples, you can use methods other than border. For example, overflow:auto:

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

html,
body {
  height: 100%;
}

div {
  min-width: 300px;
  max-width: 500px;
  min-height: 200px;
  max-height: 450px;
  height: 100%;
  background-color: Pink;
  overflow: auto;
  margin: 0 0 1em;
}

div.first {
  border-width: 2px;
  border-style: solid;
  border-color: Black;
}

p {
  width: 75%;
  height: 75%;
  background-color: Black;
  color: White;
}

<div class="first">
  <p class="one">Paragraph one text...</p>
</div>
<div class="second">
  <p class="two">Paragraph two text...</p>
</div>

See also:
Mastering margin collapsing.
What You Should Know About Collapsing Margins.

Adding a border "pushes down" contents

2 Answers2

UPDATE: