This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 3 years ago.
I have a basic HTML page that contains one div in my body: Container. There is a background image that I'm using to cover the entire width of the page. However, the image doesn't cover the entire page instead it leaves a margin around the top, bottom, left, and right.
In addition, I added an overlay using Container::After, but it also doesn't cover the entire image - it leaves a margin too.
Solutions I tried:
Doing some research, I found that HTML displays elements using inline. So, I tried changing the display to flex. In addition, I even tried to float my container to the left. However, nothing worked. The only thing that worked was adding negative margins to my container and the whitespace was removed. However, when I added an h2 element - the whitespace came back.
I'm not sure what is occurring here? Any suggestions would be great. Below is my jsfiddle:
https://jsfiddle.net/fun_code11/zcqm1w5u/2/
.container{
background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80");
background-size: cover;
background-repeat: no-repeat;
position: relative;
height: 600px;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
}
.container::after{
content: " ";
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
You should remove the top margin from the h2. That causes the whitespace. You can do sth like h2 { margin-top:0 }
Related
This question already has answers here:
Removing the default 8px margin from body
(3 answers)
Closed 3 months ago.
I'm trying to put a navigation bar with links at the very top of the browser screen. This bar will stretch all the way to the top, left, and right, with zero margins outside of it. I have already set the width to "width: 100%" in the CSS for this container. I have set margin-left, margin-top, and margin-right all at -8px because it appears putting a negative pixelation in is the only way to get those margins to go all the way to the edge.
For some reason, no matter what CSS properties I set, I cannot get that right margin to go all the way to the edge. Any ideas as to what I can try to get this stubborn margin to disappear? Just for kicks, I even set the right margin to negative 500px just to see. It had no effect on it. My right margin seems to be totally inaccessible. I would say that right now there is about a 5px margin on the right side that will not go away.
Please help.
.publicnavbarwrap {
width: 100%;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
background-color: #CCC;
box-shadow: 5px 5px 5px;
#FFF;
}
body {
font-family: Quicksand, verdana;
background-color: #000000;
box-sizing: border-box;
background-image: url(../images/background.jpg);
background-size: cover;
}
<section class="publicnavbarwrap">
<div id="public_nav_bar">
Nav content
</div>
</section>
Remove the negative margins from .publicnavbarwrap and add this to the body:
body {
margin: 0;
}
Some browsers have a default margin for the body inside the user agent stylesheet
This question already has answers here:
Why does this page scroll?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I somehow lost track of what I am doing wrong here:
I got a simple content <div>.
it has a height of 100% - 30px and a margin-top of 30px, ...so together they add up to 100% of the parent elements height.
the parent element is the body with height set to 100vh. No margins, no paddings.
However I do still get a y-scroll bar on the right. Can anyone explain to me, why that is?
I put a minimal example here to show what I mean:
https://jsfiddle.net/kemo8npa/4/
Can someone explain to me, why i get the scrollbar?
html {
margin: 0;
padding: 0;
}
body {
height: 100vh;
margin: 0;
padding: 0;
background-color: purple;
}
.content {
height: calc(100% - 30px);
margin-top: 30px;
background-color: blue;
width: 300px;
}
<div class="content">
content
</div>
edit: changed example to be more minimal.
The margin-top of .inner adds 30px outside of the element, so the sum is 100% height again.
You could use padding-top instead.
This question already has answers here:
Why does my header moves down when I set it fixed?
(1 answer)
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 2 years ago.
I've read that:
MDN
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.
So, what can cause this behaviour?
* {
margin: 0;
padding: 0;
}
.block {
width: 500px;
height: 500px;
background: rgba(4, 127, 214, .3);
position: absolute;
}
.block_2 {
margin-top: 500px;
width: 500px;
height: 500px;
background: red;
}
<div class="block"></div>
<div class="block_2"></div>
That margin-top should move my red element down in theory... Why doesn't this happen?
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
How wide is the default `<body>` margin?
(4 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 3 years ago.
There seems to be a margin above my image although I haven't set it that way.
I've even tried setting margin-top to 0, but this doesn't fix it.
#header {
background-image: url(https://s3-eu-west-2.amazonaws.com/theartonlinegallery-wp/wp-content/uploads/20180627134442/london-cityscape.jpg);
background-repeat: no-repeat;
height: 350px;
background-position-x: 100%;
background-posititon-y: 75%;
background-size: 1400px;
opacity: 0.8;
text-align: center;
font-family: "Poiret One";
color: white;
margin-top: 0px;
}
<div id="header">
<h1>Investment Blog</h1>
</div>
If you run the code snippet you posted and look at the computed styles, you'll see that while the div does indeed have a margin-top of 0, the h1 block containing "Investment Blog" inside of it does NOT have a margin-top of 0. You'll have to do additional styles for the title.
It's because the body tag has default values that you don't see.
Try to add body { margin:0px; padding:0px; } to your CSS file and it will set the default padding and margin to 0.
You need to set margin to 0 for both the body and the h1, like:
body,
#header h1 {
margin-top: 0;
}
This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 8 years ago.
I have a pop up which contains an ASP.NET form, click the link "Request Information" and the form appears.
However, the pages that have the link "Request Information" to trigger the pop up have a lot of content therefore scrolling is required to see the link.
I need to have the div always centered if a user scrolls to read the content, otherwise if they don't scroll the pop up still appears centered on screen.
The div is positioned absolutely, the whole page width is 960px with margin set to 0 auto.
If the div has an fixed width and height use:
(if width=120px and height=80px)
position: fixed;
top: 50%;
left: 50%;
margin-left: -60px; /* negative half of the width */
margin-top: -40px; /* negative half of the height */
If your popup div has a fixed size then you can use this CSS:
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* this requires a fixed size */
Otherwise you have to fiddle around with display: table-cell; and the like.
Is this what you're trying to do? http://jsfiddle.net/Hrwf8/
The key here is to set the left and top styles to 50% and set the margin-left and top to the negative amount of half of the width and height of the div. This of course requires that you have a fixed size for your div.
Use a position:fixed; for this, use 0 for top, left, right and bottom, and give the div a display:table-cell; also, like this, setting text-align:center; and vertical-align:middle; will make everything inside appear exactly in the middle, without pixel-exact hacks like negative margins.
In your CSS:
.ClassCenter {
position: absolute;
left: 50%;
top: 50%;
}
Source:
http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html