What is the reason of padding / margin? - html

I have been impementing a web page in HTML and I have came across a weird problem.
http://jsfiddle.net/SntpD/3/
#menuh
{
width:100%;
padding-top:10px;
padding-bottom:10px;
float:left;
font-family:arial, tahoma;
text-align:left;
padding-left:12%;
background:#c1188d;
}
I can't see anything here which should introduce the white margin on the left side.
The magenta belt for drop-down menu is supposed to be aligned strictly to left (in my opinion) but it is not. (left side should be like it's right side is to right edge.)
Could somebody tell me what is the distance between edge of browser and magenta div (#menuh) ?

There are default styles imposed by many browsers. In my case (Chrome/Mac), the body element has a margin imposed on it of 8px. You can use the following rule (put it at the top of your css) to remove all margin/padding on elements by default:
* { margin: 0; padding: 0 }
Or you can just remove the margin/padding on the body element. I prefer the wildcard method, since it keeps the same issue from coming up later with other browser defaults.

JSFiddle (and most browsers) give the <body> tag a default padding, which is the white space you're seeing. Set
body {
padding: 0;
}
and your problem goes away. The padding in your JSFiddle (for me on Chrome/Win8 at least) is 8px.
To catch all situations (browsers have different default styles), apply a 0 padding and margin to both <body> and <html>:
html, body {
padding: 0;
margin: 0;
}

Default padding is the issue. Most all browsers have it, so even outside of jsfiddle, you may encounter it.
Best thing to do is use a CSS reset stylesheet. Creates proper padding and margin reset for most of the elements you will use in your web page. Here are some examples:
http://yuilibrary.com/yui/docs/cssreset/
http://meyerweb.com/eric/tools/css/reset/
http://www.cssreset.com/
http://html5reset.org/
http://necolas.github.io/normalize.css/

Related

Do HTML Headings (<h1> - <h6>) have a default padding or margin in any browser?

Someone asked my friend how to remove the space around a heading tag, and he answered with
h1 {
margin: 0;
padding: 0;
}
But I've never actually seen padding around a heading. Only margin, in every browser I got. So now I'm wondering, is there actually any browser, in which there is padding around the headings by default?
Or is it a standard that all browsers follow, to not put padding around headings? Is the padding: 0; unnecessary?
Headings, by default, have a padding of 0. However, an H1 for example
has a top and bottom margin: .67em;, by default. These top & bottom margins grow all the way to 2.33em for an H6. So for each heading, the top and bottom margins gradually increase by default.
I usually only post from MDN, but unfortunately, they don't have anything on this. Check out this helpful article by W3Schools which is insightful when discussing the defaults for all HTML elements.
So to answer your question. Yes, the padding: 0; is unnecessary. However, the margin: 0; will change the default top and bottom margins.

div outer borders

I'm trying to create a div header that extends the entire length of the page, but I keep getting a small white outer border on all divs so that the entire page has a thin white border around the outside. I'd like for the divs to extend to the very edge.
I've tried a few different css options but none seemed to have worked. E.G (Not all at once)
div
{
padding:0;
margin:0;
border:0;
margin: 0px auto 0px auto;
}
That sounds like the default margin/padding on the body. Some browsers uses margin, some (Opera) uses padding, so set both:
body { margin: 0; padding: 0; }
In general, you should be using some form of css reset or normalization. I'd check out this one, because it's by the master genius of css resets himself, Paul Irish.

css issue with line spacing between text with there is more than two lines, ie7

In compatibility mode for ie7, I am noticing a weird spacing issue for internet explorer 7. I have a joomla news feed arranged as links within a series of vertical list items. For some reason, the white space height between each line of text seems to be variable. Here is the url of the page in question, www.galloplaw.com. What could I do or set to fix this issue?
Even if you don't give any padding or margin to ul, li in every browser it takes some default margin and padding.
And the amount is different in different browsers.
So you need to do one thing, i.e reset the margin and padding.
Either use
*
{
margin: 0;
padding: 0;
}
to reset the margin of every element in the page or use
ul, li
{
margin: 0;
padding: 0;
}
to reset the margin of ul and li element only.
After resetting it you can give your custom margin and padding.
Hope this will help you.
I'd highly recommend using a true CSS reset like Eric Meyer's reset or Normalize CSS, but it maybe a little bit late in your project for that.
The problem here may be that, on your news li tags, you have top and bottom margins. In recent browsers, the bottom margin of one li will merge with the top margin of the following li. Not in IE7. You could remove the top margin from your li by deleting the following on line 475 of your css :
.latestnews li {
margin-top: 10px;
}

Unwanted white areas on HTML page

I've made a site using with a CSS made from scratch.
The Page The CSS
Randomly there are unwanted white spaces in two places:
Above the main content area (below
the menu bar).
Below the main content area and
sidebar and above the footer.
I've experimented with various methods of fixed the problem like margins and paddings but they didn't seem to work.
What could I do to get rid of these white areas?
The extra white space comes from the browser's default stylesheet. Add these rules:
h2 {
margin: 0;
}
h4 {
margin: 0;
}
To solve this problem, and prevent future ones, I recommend using a CSS reset. Eric Meyer's is a widely recommended one; another good option is the YUI CSS Reset.
You need a css reset. For example the white space below the menu bar is caused by the browser default margins of the .maincontent h2.
Personally I prefer to reset the styles for the selectors that I use, but there are general css resets like Eric Meyer's Reset CSS.
Your maincontent h2 and footer h4 both have margins(.83em and 1.33 em respectively) set them both to 0
Have you checked out your css in IE?
.maincontent {
background: #0F3;
height: 300px;
width: 580px;
float: left;
}
basically, you need to add float:left; to your maincontent css
1.) The "Main Page" header has a top margin of 19 pixels. This causes that 19 pixel area of white space.
2.) The entire Footer has a top margin of 21 pixels. This causes that 21 pixel area of white space. Also, for fixing the issue below sidebar, solving 1 + 2 may automatically resolve this.
try adding the following to the top of your stylesheet:
body, h1, h2, h3, p
{
margin:0;padding:0;
}
This ensures that all browsers' default padding/margin are set to 0, so its consistent. Then you can add padding/margin where you need it.

CSS: How can I get rid of the default window "padding"? An element set to 100% width doesn't reach the window's borders

So I have an element that is placed directly inside body:
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
The following is the CSS used:
body{
text-align:center;
}
#header{
margin:auto;
}
So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:
| |----header----| |
^window border ^window border
I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":
$('#header').width($(window).width());
One solution seems to be to add the following CSS rules (and keep the javascript above):
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...
So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?
body has default margins on all browsers, so all you need to do is shave them off:
body {
margin: 0;
text-align: center;
}
You can then remove the negative margins from #header.
An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:
* {
margin:0;
}
This will solve the problem and will give you finer control over the margins of all elements.
Add these to the style tag in body, like the following one:
body { margin:0px; padding:0px; }
It worked for me. Good luck!!
I found this problem continued even when setting the BODY MARGIN to zero.
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
body { margin:0px; }
header { border:1px black solid; }
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.