My div is not being fully 100% as there is still a margin to it
output:
at the top there is still some whitespace
CSS code:
.topbar {
width: 100%;
height: 10%;
background-color: black;
}
thanks!
You have a margin at your body probably.
Body comes with a default margin. Try this.
body {
margin: 0;
}
If this not work for you, try to set margin: 0 to your other elements to find which one causing this.
Also you can use developer tools and see where comes from this margin.
html, body{
padding: 0;
margin: 0;
}
This may help you 😊.
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!
I'm currently using React and I'm having issues getting a div to equal 100% of the height of the page. Originally, I had an issue with there always being about 24px of empty space above the body. I couldn't fit it no matter what. I eventually used this on my app.css (a reset)
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
It fixed the issue, but still, a measurement of 100% or 100vh doesn't actually equal 100% of the total view. Here's a screenshot of the page:
https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40
The blue div is a div that fills 100vh. Yet, it doesn't fully fill the page. I tried 100% as well.
Blue div:
.loginWrapper {
margin-left: 260px;
height: 100vh;
background-color: #29B6F6;
}
I noticed that the html had this styling on it, yet even when removed no changes were noticeable:
html {
box-sizing: border-box;
}
If someone could please explain this phenomenon, I would be very grateful. If you need any extra information, just let me know. Thanks!
You will have to reset the basics margin and padding if applied from html and other top level tags.
body, html {margin: 0;padding: 0;}
Or just use something like reset.css
http://meyerweb.com/eric/tools/css/reset/
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.
Why does this white border always appear around the box? How can I get it to fit the whole page (horizontally) without using 'position:absolute' ?
http://jsfiddle.net/yag79aLt/
.footer-block {
height: 250px;
width: 100%;
background: #000;
}
<div class="footer-block">
Add the following to your CSS:
body {
margin: 0;
}
This will set the page's margin to zero, thus removing the white border around your JSFiddle.
Often there is a small margin around the body by default. In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides. Some browsers add padding too.
I start by adding this in all of my projects to override that:
body {
margin: 0;
padding:0;
}
If you have a large project you could consider using normalize.css. It resets a lot of default values to be consistent across browsers.
http://necolas.github.io/normalize.css/
You should always make margin and padding 0 of body before design.It will make your design perfect..good luck...:)
CSS CODE:
body {
margin: 0;
padding: 0;
}
.footer-block {
height: 250px;
width: 100%;
background: #000;
}
I'm building a website using a grid system as the framework. At first I had no problems with margins and padding, but now I have extra white space on the right side of my website.
Here is my fiddle: http://jsfiddle.net/071ad2hg/1/
I already found the problem and it is from the following code:
.grid_12 { width: 100%; }
When I comment out this line the problem goes away, but I've used it in many places throughout my site and am wondering why this is happening all of a sudden. I would like to keep it as is and just fix it somehow.
Beacuse body has 8px margin you can change that by adding margin 0 to body css tag
demo http://jsfiddle.net/ckqkyaqd/
body {
font-family: 'elegant_luxmager';
color: #444948;
margin:0;
}
Add this to your body in the css.
margin: 0;
and set a pixel width for your grids.
.grid_12 {
width: 1000px;
margin: 0 2% 1% 0;
float: left;
display: block;
}
I would suggest using a .wrapper instead.
.wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
<div class="wrapper"></div>
Found your issue:
It's the 25% margin that adds the whitespace, use a wrapper to center that part or use <center>
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
Use the inspector in Google Chrome developer tools and see the order in which the CSS is being applied. You have this additional margin which is being applied to the div. Try using a wrapper div or better yet use a defined responsive framework like Bootstrap or Foundation.
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}