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

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Charlie
Forum Members
Forum Members
Posts: 18
Joined: Sun Feb 07, 2010 6:59 pm

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

Post 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;
}
tpullano
Forum Members
Forum Members
Posts: 15
Joined: Sun Feb 07, 2010 2:50 pm

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

Post 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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

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

Post 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...
Post Reply

Return to “Layout and Design (CSS & HTML)”