I'm not new to HTML or CSS, but I really don't know why this is happening. I could just be dumb and this is an easy question something is really wrong. I'm really having trouble with this. I have a very simple web page with a div element. Not matter what I do I still have space at the top, side, and bottom of it. Here's a picture.
And Here's my HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
.SideBar {
background: #4c4c4c;
float: left;
height: 100%;
margin-left: 0px;
padding-right: 25px;
}
</style>
</head>
<body style="background-color: #05bcff">
<div class="SideBar">
<p style="margin: 0px; padding: 0px">
asd
</p>
</div>
</body>
</html>
You should assign margin 0 and padding 0 to body element in your styling.
As Frontend employee said just add
.body{
margin: 0;
padding: 0;
}
a lot of people employee CSS reset codes at the top of their stylesheets which includes this. Its basically a list of default overrides that clears any styling on elements allowing you to begin with a clean slate
See (http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/)
This happens because the <body> element has margin by default in some browsers. Different browsers can choose to apply some basic default styling to elements. Chrome, for example, adds 8px margin to by default. If you set
body {
margin: 0px;
}
This will dissappear.
A better way to go about it is to include Reset.css or Normalize.css in your code. Reset.css will unstyle absolutely everything, so that what you write is exactly what is displayed. This gives you greatest control but for most cases it's too much. For example, <h1> , <h2> , <h3>.. tags will all look the same after applying Reset.css .
Normalize.css on another hand preserves useful styling but will make sure that your elements are rendered consistently across all browsers. This is preferred in most cases.
In Codepen you can even try these out. If you click 'Settings' you can choose to include 'Normalize' or 'Reset' in your CSS. You can play around with these to see how your elements are displayed under each.
Related
For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:
<div>Hello!</div>
And I apply the following styles:
body {
background: blue;
}
div {
background: green;
width: 100%;
}
Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.
I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?
Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.
Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset.
Body element has default margin at every direction 8px long, so just rewrite this default.
body {
margin: 0;
background: blue;
}
#Edit:
...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.
body {
background: blue;
margin: 0px
}
div {
background: green;
width: 100%;
}
<div>Hello!</div>
I have a css where I defined a class for the top div with these properties
.topbluebar {
margin:0;
height:19px;
width:100%;
background-image:url('../../Images/top_blue.gif');
clear:both;
}
Here is the simple Html page
<link href="~/Content/Style.css" rel="stylesheet" />
<div class="topbluebar"></div>
<div>Foo foo</div>
Image is appearing but not with the top of browser but with little margin from top which I don't want.
In simple words I want to implement it like Stackexchnage topbar class but it doesn't seems to work for me at all.
I have read many answers but none of them worked for me yet.
Try adding the following in your stylesheet.
body { margin:0;padding:0 }
http://jsfiddle.net/z18Lpy99/
Also, to avoid these kind of issues, it is a good idea to use CSS Resets. Try reading up on http://cssreset.com/
A really simple solution would be to add the following css (below) to the top of your file. This essentially resets the margins to 0.
Here is a link to the updated JSFiddle: https://jsfiddle.net/r58hvuzp/
*{
margin: 0;
}
Try this
* {
margin: 0;
padding: 0;
}
Basically lots of things in html has default styles which include default values for padding and margins.
I'm designing a website for my company and we're using a wordpress template. We've been able to modify the template to make it full screen (& full width), however, we can't get rid of the blank header that is seen in the screen shot below. We've added custom CSS style into our style sheet, which has helped, but did not eliminate the problem:
CSS Style we added:
.page-template-template-fullsize-php #header { margin-bottom: 0; }
Any other advice would be very helpful as we're looking to clean up this aesthetic flaw on our website.
Screenshot:
Website Address: http://visualicreative.com/products/advertising/web-commercial-html/
This will help your CSS:
#content .entry-header {
display:none;
}
#content {
padding: 0px 30px 30px 30px;
}
/*changed from padding:30px; */
You really need to tweak your theme. You've got a lot of blank code in there that is creating gaps (including the blank header).
You have some inline code that increases top padding:
<div id="main" class="clearfix zIndex" style="padding-top: 108px;">
Then all of this under the entry content:
<p><a name="top"></a></p>
For your article directive/element if you use margin-top: -100px; you can shift it up by 100 pixels. More here.
In one of your template files that has been used on that page, there is a
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
empty header which causes a little more space. The rest of that additional space is because possibly in the same file just one line up of your header element, you have an <article> element with the id of #content which has padding:30px;
You can change that padding style to
padding: 0px 30px 30px 30px;
just to get rid of the top padding.
Hope this helps.
You have 108px of padding at the top of div#main.clearfix.zIndex. By removing or lessening that padding, you can affect how close to the menu bar your main div is.
Change the padding of .nav-full-width #main and you are good to go. also .entry-header has a margin, change that too.
I visited that web page and I recognized to there is many different type of levels to header.You can fix and delete some of them.However, there is a one way to fix,You should insert #content css veraible to padding-top:0px;.Also, you should delete unnececarry div and p lines from pure html.One of the unneccecary code line is in the following segment;
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
More over, there 2 empty p tags on the pure html.You should delete them.I tried it on the browser and it displaying,whatever you like.
I have a page with a image. I want set it top of page.
<HTML>
<HEAD>
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</HEAD>
<BODY style="background-color:#3baa35;" >
<IMG border=0 src="home.PNG" ></p>
</BODY>
</HTML>
But there is one line of space between the top of the page and the body.
How to set image top of page?
Put some styles:
p { margin: 0; padding: 0; }
This is because each browser has its own default CSS values. You can use Eric Meyer's reset CSS to have the same display on all the browsers :)
Link to Reset CSS
Don't forget to put border: none; as well
IMO, your css properties are okay .
as
Margin is on the outside of block elements
We use padding for inside of block elements .
By default, images align their bottom edges with the baseline of the text.
just use to get rid from this
img { /* Or a suitable class, etc. */
vertical-align: bottom;
}
Hope it will help.
Here is a hack to your answer.
Your p tag inherits the font-size from the a tag and thus assigns the margin to a size of 1em which is the size of the letter M of the parent elemt i.e THE a tag
So if you set the font-size of a to 0 then the font-size of p will be 0 and hence the margin too.
Sounds pretty cool right? Here's a working fiddle...
FIDDLE
a{
font-size:0pt;
}
WARNING: This is just for Demo purposes and should not be used in actual working code.
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.