I want the vertical menu completely at the top-left corner but right now there still about 2px top and left margin and I can not figure out why, all margin set to 0 already. Some one have any idea?
Thank so much!
The body tag has a margin set on it, try:
body { margin:0; padding:0; }
add margin: 0px; to your pages body tag.
You need to set margin: 0 on the body (live editing via Developer Tools solves it for me).
And learn to use Developer Tools ;)
Using Chrome, it showed me you had something like this:
body {
display: block;
margin: 8px;
}
from the user agent stylesheet.
You used some CSS Reset? If not, use this: http://meyerweb.com/eric/tools/css/reset/. Or if you want a quicker solution, use body {margin: 0; padding: 0;}
I'm guessing that there are still default margins on the page. Try using a CSS reset file. This will make sure that the margin and padding are all 0 when you start (along with some other nice resets).
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 am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with 0 !important; that didn't do anything.
After Googling found this:
-webkit-padding-start: 40px; What it should be for IE and Firefox?
However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left.
Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;
It's because of the user-agent stylesheets of every browser.
You should always reset all attributes in your css as your first step.
Short solution:
* {
margin: 0;
padding: 0;
}
/* your styling */
Longer solution:
http://meyerweb.com/eric/tools/css/reset/
for firefox:
-moz-padding-start: 0px;
I had this issue for a menu aswell and tried to correct it in the ul .navigation {} style I was using but didn't work until I reset it in the ul {} itself - incase anyone else has the same trouble.
I am having trouble removing the margin from the top of my container in codeigniter it is something to do with the default css but do not know where would remove it from.
https://carrarawebsitesolutions.com/
You can have a look at the top and see what I mean. I have tried may ways and now think it is something to do with the codeigniter default css I in command area some where.
I have tried do add
body {
margin: 0px !important;
padding 0px !important;
}
And still nothing
Try adding margin: 0; to .header h1
That should fix it. Hope this helps and I would suggest starting off with the Eric Meyer Reset.
I'm trying to remove the margin in the screenshot attached (see http://goo.gl/tbw4V), but I can't for the life of me see where it is in my WordPress stylesheet to remove it! I was hoping someone on hear could possibly help me? I have checked the H1, H2 tags, .bylines DIV and paragraph tags but nothing seems to be pushing the entry information approximately 15 pixels below the header. My website is at http://gracefulpostcards.com
Thanks for any help,
Steven.
To adjust these styles is highly recommended that you use the Firebug extension for Chrome or Firefox. So you can debug the html page and styles.
In your case, simply set the property margin-bottom of selector .singular .entry-title with 0:
.singular .entry-title {
margin-bottom: 0;
}
in style.css line 753
.hentry .entry-title {
margin: 0 0 0.6em 0;
}
Look in style.css, the style starting at line 753.
How I found it? Google Chrome -> Right click -> Inspect element.
The margin is defined under the selector .hentry .entry-title. It's margin: 0 0 0.6em 0. Just make it 0.
.featured {
margin-bottom: 20px;
}
Is the CSS rule you have to change.
If this is the page you are talking about : http://gracefulpostcards.com/why-start-a-personal-blog/#.UKGMi4csDng
then removing this CSS rule deletes the margin-bottom perfectly.
After inspecting your page, it seems that h2.entry-title has a margin-bottom
To fix this, add the following to your css:
h2 {
margin-bottom: 0px !important;
}