Page 1 of 1

What does margin: 0px 5px 0px do? Which margin is which?

Posted: Tue Feb 09, 2010 3:21 am
by Charlie
I have a page almost finished but I am having a small problem where I need to move the menu in the page down about 10 pixels. As hard as I try I cannot find the code to modify to move the menu down. Here is the code: can anybody help?

/* ------------  Menu  ROOT  ------------ */
.page-menu {
width: auto;
height: 35px;
margin: 3px 0 0 20px;
margin-top: 10px;
}
.menuwrapper {}

ul#primary-nav li hr.menu_separator{
       position: relative;
       visibility: hidden;
       display:block;
       width:1px;
      height: 32px;
      margin: 0px 5px 0px;
}
.page-menu ul#primary-nav {
height: 1%;
float: left;
list-style: none;
padding: 0;
margin: 0;
}
.page-menu ul#primary-nav li {
float: left;
}
.page-menu ul#primary-nav li a,
.page-menu ul#primary-nav li a span {
display: block;
padding: 0 10px;
background-repeat: no-repeat;
background-image: url(uploads/NCleanBlue/tabs.gif);
}
.page-menu ul#primary-nav li a {
padding-left: 0;
color: #000;
font-weight: bold;
line-height: 1.5em;
text-decoration: none;
margin-left: 1px;
font-size: 0.85em;
}
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:active {
color: #000;
}
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover span {
color: #000;
}
.page-menu ul#primary-nav li a span {
padding-top: 6px;
padding-right: 0;
padding-bottom: 5px;
}
.page-menu ul#primary-nav li a.menuparenth,
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
background-position: 100% -120px;
}
.page-menu ul#primary-nav li a {
background-position: 100% -80px;
}
.page-menu ul#primary-nav li a.menuactive span,
.page-menu ul#primary-nav li a:hover span,
.page-menu ul#primary-nav li a:focus span,
.page-menu ul#primary-nav li a:active span {
background-position: 0 -40px;
}
.page-menu ul#primary-nav li a span {
background-position: 0 0;
}
.page-menu ul#primary-nav .sectionheader,
.page-menu ul#primary-nav li a:link.menuactive,
.page-menu ul#primary-nav li a:visited.menuactive {
/* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.page-menu ul#primary-nav li span,
.page-menu ul#primary-nav li a,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
/* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
/* Additional IE specific bug fixes... */
* html .page-menu ul#primary-nav {
display: inline-block;
}
*:first-child+html .page-menu ul#primary-nav {
display: inline-block;
}

Re: What does margin: 0px 5px 0px do? Which margin is which?

Posted: Tue Feb 09, 2010 3:28 am
by tpullano
The margin property can have from one to four values.

    * margin:25px 50px 75px 100px;
          o top margin is 25px
          o right margin is 50px
          o bottom margin is 75px
          o left margin is 100px

    * margin:25px 50px 75px;
          o top margin is 25px
          o right and left margins are 50px
          o bottom margin is 75px

    * margin:25px 50px;
          o top and bottom margins are 25px
          o right and left margins are 50px

    * margin:25px;
          o all four margins are 25px

Re: What does margin: 0px 5px 0px do? Which margin is which?

Posted: Tue Feb 09, 2010 3:30 am
by Dr.CSS
If you look thru the default style sheets that come with cmsms you will find references to how this works, but I'll give them to you this time...

This is the same for padding or margin, this is assuming you have 4 numbers, I will give it in all variation starting with 4 numbers and working my way down...

0px 0px 0px 0px    top right bottom left...

0px 0px 0px          top right&left bottom...

0px 0px                top&bottom right&left...

0px                      all sides...