margin / padding

"margin: 10px 20px 30px 40px;" means 10px on top (and as in "margin-top"), 20px on right ("margin-right"), 30px on bottom ("margin-bottom"), and 40px on left ("margin-left")

"margin: 20px;" means all margins is 20px
"margin: auto;" means what?
and default is "margin: 0;" really?

"padding" is SAME THING as "margin"?

"position: absolute; left: -8px;" (I don't want to use this and even that does NOT do it right anyways).


I am asking this because even I set "margin: 0px;", the text still NOT butt to the edge of browser. "padding" doesn't do. "border" doesn't either. A long time ago, I saw a website that has a diagram of all those "edge" along CSS Properties, does anyone know of this website (better seeing it then wording it).

Gotta ask... Example, in beginning, set all defaults (as in below), then I want to make sure my nav is 8px from left and top ("margin: 8px 0px 0px 8px;"), will this effect the body default (for remain coding after nav)? The point is I am struggling with nav positioning (8px to be exact in all compatible browsers).

Code:

---

body{
margin: 0;
padding: 0;
border: 0;
}

.nav ul {
    margin: 8px 0px 0px 8px;
    padding: 0;
}

---

While at this subject, where can I find browser's defaults? Is there a link that displays all defaults for each major browsers? Would those CSS default mean same thing as browser default (in other words, whatever browser default is, the CSS default follows it)? Does browser "margin" means same thing as CSS "margin"?

OT: should nav be ID or class?

Once I understand this, then hopefully I will see what's all wrong with my case with localhost and webhost.

INDEX.PHP

Code:

---

<div id="framecontent">
<div class="innertube">
<p>Hey</p>
</div>
</div>

---

STYLE.CSS

Code:

---

.innertube{
margin: 8px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

---

NO MATTER how I set this "margin", even change the number to "100px" or "50px", the "Hey" remains at same margin of the browser. When I take out the <div class="innertube"> from index.php, the "Hey" goes FLUSH with the browser left side (but the top remain same gap). So, something is not working right with CSS itself? I even tried changing it between ID and CLASS (the "#" and "ID" makes it flush as same as if I remove the "innertube", so I take it as it can not be ID, it must be CLASS, huh?) I did "margin-left" and "50px 0px 0px 50px", same results (doesn't even pushes 50px). What is something besides ID and CLASS? LOL


it's either one or other, NO OTHER margin/padding/position/whatever
Attachment 6148

No, margin and padding are not the same. I think you need to read this page to understand more about the CSS box model.

For testing basic CSS concepts it's probably better to use an HTML page rather than PHP Include the CSS in the page and then give us the complete code for the page. That way it will be much easier for someone to help you.

Quote:

---

No, margin and padding are not the same.

---

Code:

---

<style>
div {
    margin: 25px;
    padding: 0px;   
}
</style>

---

Code:

---

<style>
div {
    margin: 0px;
    padding: 25px;   
}
</style>

---

I was looking at this way (two codes above)...

The best way to distinguish between margin and padding is to temporarily put a border around the element and it will become immediately obvious. For example:

Code:

---

border: 1px solid red;

---

styxlawyer, you've got PM

Quote:

---

Originally Posted by CNT

When I put everything in one index.htm file (and no CSS file), uploaded it to website, seems it is working now.

singasaw.com

I want to be able to guarantee that my side menu will look like this, in all browsers (being 8px on left, top, and right). The blue fixed section is 216px wide (that would make it 8px + 200px + 8px).

I also see left gap in the main content (appears 8px), I want to leave it like that too. I am assuming that is browser default.

I also need your help with how to overlap (show) the submenus onto the main content. If you hover the mouse over "Something...", you would see submenu in the right 8px gap.

Once that's working, I might as well leave it in HTML instead PHP?

---

I have just looked at your website with three different browsers and the sub-menus are not appearing in any of them.

Using HTML with embedded CSS is fine to start with, but once you have it working, you should move the CSS into a separate file. One step at a time.

I think you need to be lot more advanced in your coding before you venture into PHP.

Quote:

---

Originally Posted by styxlawyer

I have just looked at your website with three different browsers and the sub-menus are not appearing in any of them.

---

This is what I am asking, why is it not doing this? Does it have to do with "position: absolute;" or "overflow: hidden;" (I did tried changing it, no effects).

Attachment 6149