I'm trying to understand a few things.
First question:
Why there is a margin-top on the body?
html {
height: 100%;
background-color: red;
}
body {
height: 100%;
margin: 0;
background-color: yellow;
}
<h1>Hello Plunker!</h1>
If I look with dev tool inspector in Chrome, it shows me that the h1 top margin starts outside the body top margin (picture shows the h1 highlighted):
Second question:
In the next example, why does the yellow color is drawn outside the body?
I expected to see yellow color only within the body element, given that I set overflow property:
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}
Third question
If I add a background-color on the html element, it works, the yellow color fills only the body element, why?
html {
background-color: red;
}
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}
Your First Question
Why there is a margin-top on the body?
Answer Is
It is because of h1 tag, h1 takes margin from top and bottom. Your point is appriciatable that html (red color) is showing.
Its the default behavior. it will work fine when you add float to h1
h1{float: left;}
Your Second Question
I expected to see yellow color only within the body element, given
that I set overflow property
Answer Is
overflow only works when you apply fix width/height to any tag/class.
if you apply overflow hidden to html/body it doesn't works, i think its the default behavior of the browser like firefox as well as others may be. Because same thing happened to me as well.
Third Questions answer also summarized in Answer of Second Question
i hope it would be helpful. Thanks
Set margin: 0 to h1 and add padding instead, will solve your issue.
Related
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
My header has a space above it. I want it to stay to the top without any space. I attached an image that shows the space.
Here is my code:
body {
background-color: red;
}
#example {
height: 75px;
background-color: #484848;
}
<header id="example">
example
</header>
The <body> element has a default margin. Remove it:
body {
background-color: red;
}
#example {
height: 75px;
background-color: #484848;
}
body {
margin-top: 0;
}
<header id="example">
example
</header>
Many elements come with default margins and/or padding.
This is due to the browser's default style sheet.
Add this to your elements where necessary:
margin: 0;
padding: 0;
Here is a sample default stylesheet browsers might use: https://www.w3.org/TR/CSS22/sample.html
EDIT (since you added more code)
In your case, you need to remove the margins from the body element.
body { margin: 0; }
If this is your complete HTML and CSS, the red margin can't be that wide, but anyway: Add
html, body {
margin: 0;
}
to your CSS
This solves your problem. element body have a margin by default.
body{
margin: 0;
}
in the top of the css document.
There are two things you could do. One is remove height: 75px so the div takes only it's natural height (the height of the text).
Or you could add vertical-align: top to the #example to move the text to the top - div stays the same size here.
I'm generally new to responsive web design and am trying to make a video site template. When I make the wave graphic responsive in the div tag the width works perfectly. However the height leaves a gap between the image (as if the height isn't responding base don the width) and the div tag and showing the background color red of the 'wave1' div.
You can see it here on jsFiddle on any screen size.
Any idea how to fix this???
Here is my code:
<div id="wave1">
<img src="images/wave1.jpg" alt="wave 1">
</div><!--wave1-->
#wave1 {
background-color:#C31619;
width: 100%;
height: inherit;
padding: 0;
margin: 0;
}
#wave1 img {
width: 100%
}
The red line you are seeing is the space between tags being rendered as text, and therefore taking up the equivalent space of a single character in the document flow. Simply set the font-size on the container to 0, then to 1rem (the value of the front size of the root element) on the children
(Demo)
#wave1 {
background-color: #C31619;
width: 100%;
height: inherit;
padding: 0;
margin: 0;
font-size: 0;
}
#wave1 * {
font-size: 1rem;
}
I've played with this for a while now and literally cannot see a reason as to why this is happening.
Giving
#wave1 { margin-bottom:-4px; }
works, but is certainly not the best fix as the gap is not being caused by margin and may simply break again in future.
The gap between the red bottom of the wave div and the video is caused by the padding on your "outer" div. You have:
.outer {
padding-top: 1%;
...
}
To remove the gap, remove that padding.
https://jsfiddle.net/oxn6zLar/
The height: inherit line is not necessary.
try adding display: block to your img's css.
The default display value for HTML img tags is inline, meaning that the image is rendered inline with text, and is given a line-height value, which causes the blank space underneath the image to appear (due to difference between the image height and the line height).
Another workaround would be to set vertical-align: bottom on the img element so that the difference between the line-height and the image height will be on top of the image.
I have the whole page set to gray as the background color, but would like only the content area to be set to a different color. According to my CSS, this should be happening but it isn't. Why not?
html,
body {
background-color: #FAFAFA;
}
#page-wrapper {
margin: 0 auto;
padding: 0;
width: 1024px;
}
#content {
background-color: blue;
}
OK, well, I thought there might be an obvious answer, because this is a severly slimmed-down version of my code. Yes it has content and there are things in the page-wrapper.
The jsfiddle link is here: http://jsfiddle.net/2pzo80Lu/
Also, if anyone has critiques of the code otherwise, it would be much appreciated.
You need to add overflow:auto to your rules for #content because the children are floated. Floating them essentailly removes them from the normal flow and collapses the parent since it behaves as if there's no content. Adding the overflow rule restores the behavior you seek.
#content {
background-color: blue;
overflow:auto;
}
jsFiddle example
your elements inside #content div is floated right and left so the div has no height ( 0px ) , you can solve this in css by adding the following code
#content {
background-color: blue;
overflow:auto;
}
or in html by adding the following code before the close of the element of #content
<div style="clear:both;"></div>
this will clear any floating and you code should work very will. good luck
I have some unexplained weirdness with a nested DIV's margin "leaking" out of the parent container .
The following test case* probably explains it best:
http://jsbin.com/ibaze
The outer wrapper (red) doesn't start at the very top - unless there's a text node or overflow: auto; on that element.
(Tested on Firefox and Safari.)
While overflow allows me to work around the issue, I'd quite like to know why it is happening in the first place.
Any insights would be appreciated!
* it's a minimal test case except for the script at the bottom, which merely illustrates the workarounds
The reason why it is not working is that your vertical margin in CSS is collapsing, which is expected behavior.
Remove the margin from #inner, and instead specify a padding: 50px; to your #outer to get the desired result:
* {
margin: 0;
padding: 0;
}
body {
color: white;
background-color: blue;
}
#outer {
padding: 50px;
background-color: red;
}
#inner {
background-color: green;
}
For more information on Vertical Margin Collapsing, I recommend you read the following article:
CSS - Auto-height and margin-collapsing