Why is the margin on the content div pushing down the intro div as well? I feel like I made a really silly mistake when nesting the divs, but I really have no idea.
body {
margin: 0px;
}
div.content {
text-align: center;
margin-top: 35px;
border-style: solid;
}
h1 {
display: inline-block;
margin: auto;
font-family: Lane;
color: white;
font-size: 80px;
}
div#intro {
background: blue;
height: 100%;
width: 100%;
}
<div id=intro>
<div class=content>
<h1>Text</h1>
</div>
</div>
This is occurring because the vertical margins are collapsing.
Box Model 8.3.1 Collapsing margins
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.
When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.
Take a look at the relevant spec to see the rules that apply for all the possible workarounds.
For instance, one rule is:
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.
Therefore, in your case, you can simply change the overflow property on the #intro element to something other than the default value of visible. Values such as auto/hidden would work:
body {
margin: 0px;
}
div#intro {
background: blue;
height: 100%;
width: 100%;
overflow: auto;
}
div.content {
text-align: center;
margin-top: 35px;
border-style: solid;
}
h1 {
display: inline-block;
margin: auto;
font-family: Lane;
color: white;
font-size: 80px;
}
<div id=intro>
<div class=content>
<h1>Text</h1>
</div>
</div>
With the "Text" inside both divs, they might as well be one single div. Also, that "body" style means nothing if you don't use the <body> and </body> tags. More complete HTML might help us give you a solution.
Related
I've been having a very weird CSS issue. Some of my pages have displayed an unexplained "space" between element. Inspecting the code shows that this space does not belong to any element.
I've narrowed it down, and I think I know why this issue is happening. But I wanted to know, under the hood, why it's happening.
The issue, I think, is that min-height: 50px in the #outer selector adds the bottom margin of #inner below #outer, which results in an the unexplained space mentioned above. If it were to be replaced with height: 50px the space would disappear.
This happens on Chrome but not FireFox.
My theory is that Chrome's CSS lays out the elements first then checks if min-height requirement is met. If not, then it extends the height of the div, pushing the "unexplained space" along with it. It essential copied, or inherited, the bottom margin of the child element. I think this only happens to the bottom margin though.
I've tried two tests of this theory, adding padding: 1px; and adding overflow: hidden; they both cause the height of the div to include it's child and thus gets rid of the issue. Although, I think in the case of overflow: hidden it's more cutting off the overflown content.
But I'm no CSS expert, all this is just speculation on my part, which is why I wanted to pose this as a question :)
Here's the code
#outer {
background-color: blue;
min-height: 100px;
}
#inner {
background-color: red;
height: 50px;
margin-bottom: 50px;
}
#bottom {
background-color: green;
height: 50px;
}
<div id="outer">
<div id="inner">
</div>
</div>
<div id="bottom">
</div>
This occurs due to margin collapsing - specifically the margin-bottom of inner collapses to become the margin-bottom of the outer element.
Solution:
Give a border to the outer element to prevent the margin collapsing - see demo below:
#outer {
background-color: blue;
min-height: 100px;
border: 1px solid blue;
}
#inner {
background-color: red;
height: 50px;
margin-bottom: 50px;
}
#bottom {
background-color: green;
height: 50px;
}
<div id="outer">
<div id="inner">
</div>
</div>
<div id="bottom">
</div>
Sorry, i am novice in CSS. I have the following html:
<div class="box-A" >Box A is here</div>
<div class="box-B" >Box B is here</div>
and i have tried to apply the following css to it:
.box-A{
background-color: red;
padding: 30px;
margin: auto;
border: 13px solid green;
margin-bottom: 40px;
}
.box-B{
background-color: blue;
padding: 40px;
margin-top: 140 px;
}
It works correctly for box-A meanwhile when i apply margin-top: 140 px; to box-B I expect to see a margin around 180px between 2 boxes.
But nothing happens. Can you please tell me why margin-top does not effect?
Do not use space between px and number.
.box-B{
background-color: blue;
padding: 40px;
margin-top: 140px;
}
regarding to w3 schools css margin-top property it can happen, that only the biggest of both values (top and bottom) is accepted.
Margin Collapse. Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
This does not happen on horizontal margins (left and right)! Only vertical margins (top and bottom)!
I need to fix a problem on an existing web page, I need to center elements that have float : left; inside one big <div>. I don't want to remove the floating, and I'm wondering what is the best way to center those elements and make them on two rows.
.big {
width: 150px;
height: 150px;
background: gold;
}
.a {
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
float: left;
background-color: red;
}
<div class="big">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>
Floating makes this weird. Otherwise
.big{
width:150px;
height: 150px;
background: gold;
text-align: center;
}
.a{
display: inline-block;
margin: 5px auto;
width:50px;
height:20px;
text-align: center;
background-color:red;
}
<div class="big">
<div class="a">1
</div>
<div class="a">2
</div>
<div class="a">3
</div>
<div class="a">4
</div>
</div>
You may use flexbox.
.big{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: gold;
width: 150px;
height: 150px;
}
.a {
flex: 0 0 35%;
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
float: left;
background-color: red;
}
<div class="big">
<div class="a">1
</div>
<div class="a">2
</div>
<div class="a">3
</div>
<div class="a">4
</div>
</div>
I do not believe there is a point in floating if you do have no intention of wanting to float to the top and to the left. You need to master the use of both position and display properties. This I believe is what you are looking for. I have put explanations underneath explaining what the relevant display and position properties, as well as why I used what I did.
.big {
width: 150px;
height: 150px;
background: gold;
}
.a {
position: relative;
left: 12px;
display:inline-block;
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
background-color: red;
}
Positioning is how the element is positioned in the document. The options in CSS are either static, relative, absolute, fixed.
Static: This is the browser default. It is not affected by positioning, and will just be positioned in the natural flow of the page.
Relative: Will cause element to be positioned relative to it's initial position. (i.e.: if the element is positioned at X (initial position), then will be moved depending on what properties put in)
Absolute: Will cause element to be positioned relative to next parent element. An important thing to note about this is that elements are removed from the flow of the page meaning that it is possible to have multiple elements stack on top of one another.
Fixed: Will cause element to be fixed relative to the browser window, commonly known as viewport itself. If you scroll down, the position will be fixed, hence the name.
Display
This is how the browser will treat the type of "box"/element that is used (all elements can be considered boxes, as per the box model).If you have trouble grasping the concept, put element {border: solid black} into all your css elements and you'll see what I mean.
There are multiple displays will only get into the 3 of the arguably most important ones: block, inline, inline-block.
Block: element will take up the maximum amount of horizontal space necessary. Think of the li as an example. The list point will take up the maximum amount of horizontal space, and thus each separate li can be considered a block.
Inline: element will take up the minimum amount of horizontal, and vertical space necessary to fit within the flow. Think of the anchor a tag, as it will take up the minimum amount of space necessary to fit within the flow of a paragraph.
Inline-block: Considered an inline value but with the ability to change the width and height of the element.
For your example, I have used the relative positioning element (positioned it right 12px relative to where it originally was) and changed the display to be inline-block, as divs are naturally block elements and thus, without the inline-block display feature, they would have only stacked 1 at a time.
Here is the jsfiddle
In my example, giving either of the children elements a bottom margin causes its sibling to be pushed down by whatever margin I specify; I hadn't anticipated seeing anything move since the container is larger than each div. Why is this the case?
HTML
<div class=container>
<section></section>
<aside></aside>
</div>
CSS
.container {
background: whitesmoke;
height: 12em;
width: 12em;
}
.container section {
background: slategray;
display: inline-block;
height: 04em;
margin-bottom: 20px;
width: 04em;
}
.container aside {
background: gold;
display: inline-block;
height: 04em;
width: 04em;
}
Add vertical-align: top to your section element. As these elements are ìnline-block, they are not simply behaving as boxes anymore - they have flowing text properties. It is not really the margin that is pushing down the other element, it is the default vertical-align property they have.
jsFiddle Demo
Other Demo that shows the effect with text - the key is vertical-align
Example
If the adjacent element of a parent floating, the parent does not feel the width of the element, if it is dynamic. In chrome and opera works fine.
<div class="b-wrap">
<div class="b-content">
<div class="b-rect-left"></div>
<div class="b-rect-right"></div>
<div class="b-child-cont">джигурдаололо</div>
</div>
</div>
.b-wrap {
background-color: red;
height: 50px;
float: left;
}
.b-content {
margin: 5px;
overflow: hidden;
}
.b-rect-left {
width: 40px;
height: 40px;
float: left;
background-color: orange;
}
.b-rect-right {
width: 30px;
height: 30px;
float: right;
background-color: green;
}
.b-child-cont {
overflow: hidden;
}
Firefox calculated the width of an element that contains floats differently from Chrome. I don't know why.
However, what seems to be happening is the following.
The actual content in your snippet is in b-child-cont, a non-floated element. b-child-cont determines the width of b-content since the two other elements are (b-rect-left and b-rect-right) are floated and do not factor into determining the width of the content. In turn, the width of b-content sets the width of b-wrap, because b-wrap is floated and takes on the width of its child elements.
You as a designer and developer, need to allow some space for the two floated elements. You can do this in many ways. I will give two examples.
(1) Add left and right margins to b-child-cont:
.b-child-cont {
overflow: hidden;
background-color: yellow;
margin-left: 40px;
margin-right: 30px;
}
(Note: I added a background color to show the extend of the element.) The 40px and 30px values are based on the widths of the left and right square elements respectively.
(2) You can also specify a with to the parent element containing the floats:
.b-child-cont {
overflow: hidden;
background-color: yellow;
text-align: center;
}
.b-content {
width: 30em;
}
In this case, I set the with of b-content to 30em (you can adjust this accordingly) and I centered the text in b-child-cont.
You have come across a cross-browser discrepancy in how the CSS box model is calculated. Once you are aware of it, you need to design around it, but that is not too hard to do.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/dzK73
Just add this firefox exception
#-moz-document url-prefix() {
.b-wrap{width:175px;}
}