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;
}
Related
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 😊.
Had position: absolute and it worked fine, the bottom border went from left to right viewport edges. When I change to sticky there are little gaps on either side even though width: 100%. It also gets a gap on top. This is also happening with the footer which has the same style except border-top. How do I make it sticky and not have the gaps? Thanks
header{
height: 50px;
width: 100%;
position: sticky;
border-bottom: 3px solid red;
}
<header></header>
This will it work.
body {
margin:0;
}
The User-Agent StyleSheet is the default CSS that comes with every HTML page. It's the stylesheet that causes text to be serif by default and buttons to have a gray background. A lot of developers find that the UAS comes in their way when trying to style their HTML documents, so they apply CSS Resets.
CSS resets set a better default starting point so the UAS doesn't come in your way, similar to the problem that you're facing. The 23 most common resets are for margin, padding, and box-sizing.
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Your Header Styles*/
header {
height: 50px;
width: 100%;
position: sticky;
border-bottom: 3px solid red;
top: 0; /* I've added this line to make your header stick to the top */
}
<body style="height: 1000px;">
<header>Here is a sticky header</header>
</body>
The * {} selector ensures that all elements have their padding and margin reset, along with their box-sizing.
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.
I have a main container in CSS that contains all divs for the page. However, there is a white space of 8px pushing the entire container to the left. Any idea how I can get rid of it, and have the container fit the entire window without white space? If I use "margin-left: -8px" it just creates 8 pixels of white space on the right. Heres the code for the container:
#container {
height: 100%;
width: auto;
position: relative;
background-color: #E6E6E6;
min-width: 960px;
}
Just set margin: 0px; on #container, if that does not work you can set
body {
margin: 0px;
padding: 0px;
}
This is because of the default styles being applied by the browser stylesheet.
There are a few ways you can solve you're problem:
Apply this css rule, which effectively get's rid of any default padding or margin applied to elements.
* {
margin: 0;
padding: 0;
}
Or you could use a css reset stylesheet, which I recommend the most because different browsers handle elements somewhat differently and you want to even the field out so you don't run into any problems later. I recommend Eric Mayers css reset stylesheet it can be found here: http://meyerweb.com/eric/tools/css/reset/ and I use it for my own projects.
html, body, #container {margin:0; min-height:100%;}