is it a bug? margins of P element go outside the containig div
This is the behaviour as it is defined in the CSS box model:
8.3.1 Collapsing margins
In this specification, the expression
collapsing margins means that
adjoining margins (no padding or
border areas separate them) of two or
more boxes (which may be next to one
another or nested) combine to form a
single margin.In CSS2, horizontal margins never
collapse.Vertical margins may collapse between
certain boxes:
- Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.
- Vertical margins between a floated box and any other box do not collapse.
- Margins of absolutely and relatively positioned boxes do not collapse.
http://www.w3.org/TR/CSS2/box.html
The rationale behind this might be, that if you set a (vertical) margin on something, you just want to ensure that there is at least this much space left between the border or padding of this element and the border or padding of the next element (e.g. two paragraphs).
If you want the margin to be contained in the div (i.e. making the div expand), you need to set some padding or border at the top and bottom of the div.
Margin goes outside div when border is removed
Because margins are evil (and tend to collapse -> is it a bug? margins of P element go outside the containig div). In your case you can simply add overflow:hidden;
to .outer
http://jsfiddle.net/yhAaQ/
CSS margin terror; Margin adds space outside parent element
Add overflow:auto
to your #page
div.
jsFiddle example
And check out collapsing margins while you're at it.
Margin/padding comes outside a div
Specifying px instead of percentage in this case will fix the issues.
You can view on codepen as well - https://codepen.io/Ilima/pen/gzVWJB?editors=1100
.featured_box {
max-height: 500px;
overflow: hidden;
position: relative;
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.featured_image {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg);
overflow: hidden;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 500px;
width: 100%;
}
.featured_image:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}
.featured_title{
margin-top: 360px;
position: relative;
z-index: 1;
font-size: 2rem;
color: #fff;
text-align: center;
}
<div class="featured_box">
<div class="featured_image">
<p class="featured_title"> Text goes here </p>
</div>
</div>
<div class="browser"></div>
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>
P tag is pushing down a parent div
By Default Paragraph tag has margin. So do the below code change in your css.
CSS
.name {
letter-spacing: 0.3px;
color: white;
font-size: 26px;
font-family: 'Barlow Condensed';
margin: 0; /* Newly added */
}
#content {
height: 350px;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
display: flex; /* Newly added */
}
OUTPUT
Related Topics
How to Create a Slanted Background with CSS
Floating Elements Are Outside of Containing Blocks
How to Set the Thumbnail Image on HTML5 Video
Is It a Bug? Margins of P Element Go Outside the Containig Div
Skew Background Image on One Side with a Border
What CSS Should I Use to Get a Border Around an Option Tag in Both Firefox and Ie
Font-Family Is Not Inherited to the Form Input Fields
Print Table Footer at the Very Bottom on Last Page
Grails: Displaying Created Image in Gsp
Google Web Fonts and PDF Generation from HTML with Wkhtmltopdf
Listitem Disc Displaying at Vertical Bottom
Mix-Blend-Mode Not Working in Webkit-Browsers When Element Is Direct Child of Body
Internet Explorer Doesn't Recognise the 'Html' CSS Background Image Tag