Results 1 to 8 of 8

Thread: margin / padding

  1. #1
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default 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.

  2. #2
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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
    Click image for larger version. 

Name:	0MGK8Sw.jpg 
Views:	22 
Size:	36.6 KB 
ID:	6148

  3. #3
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    408
    Thanks
    0
    Thanked 47 Times in 44 Posts

    Default

    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.
    Last edited by styxlawyer; 02-28-2017 at 09:22 AM.

  4. #4
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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)...

  5. #5
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    408
    Thanks
    0
    Thanked 47 Times in 44 Posts

    Default

    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;

  6. #6
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    styxlawyer, you've got PM

  7. #7
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    408
    Thanks
    0
    Thanked 47 Times in 44 Posts

    Default

    Quote Originally Posted by CNT View Post
    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.

  8. #8
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by styxlawyer View Post
    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).

    Click image for larger version. 

Name:	694IyNC.jpg 
Views:	19 
Size:	54.5 KB 
ID:	6149

Similar Threads

  1. Resolved CSS padding or margin problems
    By mlegg in forum CSS
    Replies: 4
    Last Post: 05-02-2012, 12:50 PM
  2. Margin/Padding
    By TheJoshMan in forum CSS
    Replies: 5
    Last Post: 07-31-2008, 01:47 AM
  3. Replies: 6
    Last Post: 03-11-2008, 04:01 AM
  4. ie6 issue padding or margin- headache
    By 5starrebel in forum CSS
    Replies: 1
    Last Post: 01-22-2008, 09:46 AM
  5. Replies: 6
    Last Post: 12-14-2007, 08:28 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •