here is a JS Fiddle
I have already tried a couple of different things such as body { margin:0; padding:0;} it doesn't work
body {
margin: 0;
width: 100%;
height: 3000px;
}
Look at the header margin:
#header {
width: 100%;
/*margin: 20px 0;*/
z-index: 1;
}
The space comes from this. Delete it.
this is called Margin Collapsing..
try replacing this..
#header {
width: 100%;
z-index: 1;
}
FIDDLE
and refer this for Detailed Answer
Add reset.css file to your webpage. ask google for reset.css
margin: 0px 20px 0 20px; or margin-top:-10px;
try this
Related
I am trying to make a footer, but the left and right sides show some white space. How to remove the white space?
Here is my code:
<html>
<head>
<style>
footer {
background: none repeat scroll 0% 0% #DFDFDE;
padding: 120px 0px;
text-align: center;
position: relative;
}
.divider {
background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png')
repeat-x scroll center center transparent;
height: 7px;
width: 100%;
position: absolute;
top: -6px;
}
.container {
width: 930px;
margin: 0px auto;
}
</style>
</head>
<body>
<footer>
<div class="divider"></div>
<div class="container">
<h1>hiiiiiiiii</h1>
<br>
<h2>buyyyyyyyyyyyy</h2>
</div>
</footer>
</body>
</html>
image of footer
The tag defines a footer for a document or section.
A element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
The body has a default margin. Remove it via:
html,body {
margin:0;
padding:0;
}
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
html, body {
margin: 0px;
padding: 0px;
}
*{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Try out this code:
html, body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Your body has a default margin and padding and you need to override it.
At the beginning of your style type.
body{
padding: 0;
margin: 0;
box-sizing: border-box
}
Add this to your style tag...
body {
margin: 0;
}
Just make sure to add this class to your CSS style.
.container-fluid {
width: 100%;
margin: 0px;
padding: 0px;
}
Try this; it is the simplest one, add it to your body selector.
body {
margin: 0px;
padding: 0px;
width: 100%;
}
For me, It's working
html, body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
if ur having unwanted white space in right side of ur screen its because of overflow so to remove it go to ur css then in body write
in css:
(body{
width:100%;
overflow-x: hidden;
})
this is before
this is after
this is my first help i am new to stackoverflow hope this helps
Even when I'm using this simple code, the browser shows a little offset on left and top. How to fix this. Code is below:
<html>
<head>
<style="text/css">
#container{
width: 100px;
height: 100px;
background-color:orange;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
It's because most browsers use a standard CSS stylesheet (see http://www.w3.org/TR/CSS21/sample.html).
One of the rules sets the margin of the body to 8 pixels:
body {
margin: 8px;
}
You can disable it by setting the margin to 0 pixels:
body {
margin: 0;
}
See this JSFiddle for more details.
Try to add this css:
* {
margin: 0;
padding: 0;
}
even better:
*{
margin: 0 auto;
padding: 0;
}
This worked for me all the time:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Make the margin-top and margin-left of html and body 0.
html, body{
margin-top: 0;
margin-left:0;
}
I was building a static html page for creating a wordpress theme.but now i notice that 48px margin is above the body element(I found it with chrome developer tools).i can fix it by just adding a -48px margin but what exactly is causing this problem,can someone help me.
My CSS
body{
font-size:18px;
line-height:1.72222;
color:#34495e;
font-family:Ubuntu;
margin:0
}
aside {
background: #31373d;
height: 100%;
position: fixed;
width: 20%;
font-weight: normal;
color:#fff;
}
.main {
margin-left: 20%;
}
.content{
width: 65%;
max-width: 760px;
margin: 3rem auto;
}
Look at this live JSfiddle Demo - http://jsfiddle.net/aq96b/1/embedded/result/
It's the line
margin: 3rem auto;
in your .content that's causing this (if I properly understand the problem). Unchecking/removing that margin will move the content back up to the top left of your .main div.
To maintain a similar effect with the content position, you could add padding to the .main of the same amount ie
padding: 3em;
Remove the margin: 3rem auto; from .content.
DEMO HERE
It's coming from the div .content. To correct this you should add overflow:hidden to .main
Example
.main {
margin-left: 20%;
overflow: hidden;
}
Alternatively you can set .content to inline-block. This will also correct the issue.
Example
.content {
display: inline-block;
}
Does anyone know why this mysterious margin is?
This is the link to my site
I have tried everything! Turning all the margins off and on and playing with padding
but i just cant find the problem why does horizontal slider bar appear?
Thanks for all help!
You have a pretty significant typo in your css:
body{
marign: 0px;
background-color: #e6e6e6;
width: 100%;
height: 100%;
}
margin is spelled incorrectly.
To eliminate some odd margins that arise, I would suggest adding this to your code:
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Usually a pretty safe bet that eliminates some unnecessary margins, and fixes your problem. I get that you have some margins all over the place, but from your post it's hard for us to understand which margins you are trying to eliminate.
use this code :
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
probably may help you
it's on fg_membersite.css line 5 :
body {
background-color: rgb(230, 230, 230);
width: 100%;
height: 100%;
}
change to this :
body {
background-color: rgb(230, 230, 230);
}
.ads {
width: 160px;
height: 600px;
background-color: orange;
float: right;
}
.content {
margin-top: 50px;
width: 100%;
height: 100%;
}
What I always do to prevent this kind of margin/padding:
* {
padding:0;
margin:0 auto;
}
It just gives every element standard 0 margin and padding, unless you change it per element of course.
Fix the "body {marign...}" typo as jdero said and your horizontal bar will be gone. You don't need to set all the margin-top, bottom etc to 0 though. Once you fix the typo you will have body {margin : 0px}. This is all you need to set them all to 0.
I am trying to center an image that is located within a div, which is then located inside of another div. Not to worry, I will post some code so you can all see what the heck I'm talking about here.
HTML:
<div id="container">
<div id="featureimage" style="width: 845px">
<img src="Stylesheets/images/globkey.jpg" alt="" />
</div>
</div>
CSS:
body {
background-color: #383838;
margin: 0; padding: 0;
font-size: small;
color: #383838;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
* html body {
font-size: x-small; /* for IE5/Win */
font-size: small; /* for other IE versions */
}
img {
border-style: none;
}
/* Conatiner */
#container {
background-color: #fff;
width: 845px;
margin: 0 auto;
overflow: hidden;
}
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px 0;
/* I have also tried without padding and no margin!*/
}
#featureimage img{
margin-left:50%;
margin-right:50%;
width:360px;
height:360px;
}
I am fresh out of ideas here! Been at this for ever!
Thank you for any help,
Evan
Images are inline elements, to center them, you can use text-align: center; or set them to display: block and set margin: 0 auto;
just for sure add text-align: center to your #container, and then add margin: 20px auto; to your featureImage. If you want img to be centered within featureImage should work (featureImage will inherit text-align: center).
According your provided markup structure it is enough to following way:
img {
display: block;
margin: 0 auto;
}
But above approach will work if container contain single image. Bu if container contain multiple image then above technique will not work anymore then following way would be ideal:
#featureimage {
text-align: center;
}
img {
display: inline-block;
vertical-align:top; // It is recommended when you use css property vertical-align
}
Use:
margin: auto !important;
display: block;
Also try going to Play Store download the app HTML code it will come in handy for you.
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px 0;
text-align:center;
}
I would try this css:
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px auto 0px auto;
text-align: center;
}
I may be totally off on this one, as I haven't tested it out.
i would use this for sure,, the absolute; will keep it in that spot if you want it to move with the page put fixed; but other than that boom
#featureimage {
width: "change this code to whatever expample..." 555px;
height: "change this code to whatever example..." 96px;
position: absolute;
top: "change this to where ever it centers , you just have to mess with it.. example..." 960px;
right: "same with this i had to put - to get it right as far as i could just play with it..." -945px;
}
It can also be solved by simple put a <center> tag:
<center>
<img src="abc.gif">
</center>
But the best way and html5-like is as mentioned next:
define in the header:
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
To make use of this class in the body:
<img src="abc.gif" alt="abc" style="width: 90%; max-width: 300px;>
That's all. The last method is that recomended by w3c.