html code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- div for box-->
<div id="panel"></div>
</body>
</html>
CSS used :
#panel
{
height:90px;
background-color:#CCC;
margin:0px;
padding:0px;
}
Output generateed: is a box with space left around it of 4-5pxs, and it does not cover full width.:
Expected output: with no spaces around it what i really want to do:
you need to clear the default margin that gets applied to the body. add:
body{
margin: 0;
}
Related
I have made a simple web page. I can see no blank space when I open the website on safari, but on firefox, there is a gap that is probably 30px tall.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div style="background-color: blue;">
<h1>hello</h1>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
You need to remove the margin on the heading as well. For example:
body, h1 {
margin: 0;
}
body, h1 {
margin: 0;
}
<div style="background-color: blue;">
<h1>hello</h1>
</div>
You could make it easy for yourself and reset all margins/paddings in your CSS (won't affect elements);
* {
margin:0;
padding:0;
}
Certain browsers will put margin around header tags. It's always a good idea to include a reset.css file on your site so that things appear how you want them to cross browsers.
Here's a simple reset.css file for you to include.
I have looked at lots of different answers to similar questions and cant seem to find the answer anywhere. The question is simple, why are my #body styles not being applied. Basically I just want a background color to be applied. Interestingly, none of the styles are actually being passed to from the CSS to the body. The code is simple but not working.
When i use "inspect element" i can see that all my other styles are working fin but nothing is being passed to the body element and I cant figure it out!
I'm sure its something really simple but would appreciate your help on this one. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="contact_bar">
CSS is:
#body{
background-color:red;
}
#header{
background-color: #3862C6;
height:500px;
}
#contact_bar{
background-color: #020731;
height:150px;
}
It's not #body{... , but body{... (without the "#")
What an idiot.... as soon as I poseted i notice the "#" infront of body....
You should know that in CSS # is used to style id elements, but body is HTML tag and it should be styled as per the CSS given in this answer.
Your HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="contact_bar">
CSS should be:
body{
background-color:red;
}
#header{
background-color: #3862C6;
height:500px;
}
#contact_bar{
background-color: #020731;
height:150px;
}
I have been doing web design for a little over a year now, but still have strange things happen on the front end sometimes. I am creating a simple template for personal use using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
</head>
<body>
<section class="container">
<h1>Matt's Template</h1>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<!-- My Javscript -->
</body>
</html>
If I view this code in my Chrome browser, it appears that the body is shifted about 15px down from the html tag. However, my css explicitly tells the html and body tags to have no padding or margin. So why is there this space?? This has happened before and I am not really sure how I solved it. There must be some obvious answer. Here is my css too.
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
.container {
height:100%;
width:960px;
position:relative;
margin:0 auto;
padding:0;
background:#E0E0E0;
}
The problem is that your <h1> still has its default margin, you have only taken off the default <body> margin of 8px, but not the other elements which have default UA styles. You should look into using a reset so you can 'start from scratch' for each element.
http://jsfiddle.net/qfSZ5/3/
Try adding
h1 {margin:0}
or
h1 {display:inline-block}
if you want to keep its margins inside the parent.
jsfiddle
That's because h1 has a default margin assigned by the browser; that could be kinda messy.
Some people just do this in order to prevent default margins and padding:
* {
margin: 0;
padding: 0;
}
And that literally means:
"Hi browser, please nullify all the defaults margins and padding on all the existing elements. Thanks!"
My iframe a style of style="width:100%", and it almost covers the page width. But it leaves a small margin on the left and right side. So I added body { margin:0px; } to remove the space.
It works, but the problem is that removing the margin on <body> affects other things, for example a paragraph <p> inside <body>.
Is there a way to eliminate the margin only for the <iframe>?
Code:
<!DOCTYPE html>
<html>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
You should do some like:
body{margin:0} // remove body margin
iframe{margin:0;width:100%}//remove iframe margin
p,div{margin:10px} //append margin to p and other tags
Demo for your case:
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0}
iframe{margin:0;width:100%}
p{margin:10px}
</style>
</head>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
As you can see, you can use body{margin:0 0 0 0px;} for top, right, bottom, left. You will be able to remove all spaces from browser.
<!DOCTYPE html>
<html>
<style type="text/css">
body {
margin:0 0 0 0px;
}
</style>
<body>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
what's wrong with:
iframe {
margin: 0;
}
in your iframe containg page
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>