Overlap Border of Parent with H2 Margin Negative

Overlap border of parent with h2 margin negative

You can create the top borders separately (left + right with pseudo content).

body {    background: gold;}div {    border: 1px solid black;    border-top-width: 0;    text-align: center;}h2 {    display: table;    width: 100%;    margin-bottom: -10px;}h2:before, h2 > span, h2:after {    display: table-cell;    white-space: nowrap;}h2 > span {    padding: 0 10px;    position: relative;    top: -10px;}h2:before, h2:after {    content: "";    border-top: 1px solid black;    width: 50%;}

<div>    <h2><span>Hello World</span></h2>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>

How to wrap an H2 and p tag in a border like in the image:

you can try below's code.

.box {  margin-top : 50px;   border : 1px solid #000;   padding : 15px;  width : 500px;   margin-left : auto;   margin-right : auto;   position : relative;}
.title {  position: absolute;   top: -20px;   font-size: 24px;   background: #fff;   padding: 3px 0;   width: 300px;   text-align: center;   left: calc(50% - 150px);}

<html><head></head><body><div class="box"> <div class="title"><h2>Sample Text</h2></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></body>

Margin on child element moves parent element

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;
}

2021 update: if you're willing to drop IE11 support you can also use the new CSS construct display: flow-root. See MDN Web Docs for the whole details on block formatting contexts.

Update by popular request:
The whole point of collapsing margins is handling textual content. For example:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Why would margin not be contained by parent element?

This is how CSS works according to W3C:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

More specific to your case of the top div:

If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.

The best thing I can do is point you to on "Collapsing Margins" on sitepoint (by Tommy Olsson and Paul O’Brien). They do a very detailed explanation with examples showing you exactly the behaviors you demoed in the question example code.

How to remove space between borders of parent and child element and collapse them

I noticed that problem occurs based on the zoom in or zoom out. If you zoom in the problem will disappear if you zoom out it will happen again. But anyway.

if you use the property outline instead of border for the div the problem will disappear at all screen sizes. More info about outline property

result

CSS I changed

 div {
        width: 80%;
        margin: 0 auto;
        margin-top: 100px;
        outline: 2px solid black;
    }

    div h2 {
        border: 2px solid red;
        margin: 0;
    }

Or you could just give the container div border of 4px if you want it that thick and remove the h2 border completely and the opposite is correct.

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

negative top margin

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

Overlapping div over two other elements

You should use margin-top:-120px on the .container element, which is a parent of the element you are giving top:-120px at the moment.

This way you will retain expected effect and clean markup.

Overlap Border of Parent with H2 Margin Negative