CODEWITHSUNDEEP
htmlcss
charlie
charlie

Reputation: 1384

CSS margin top not working

I have this CSS code:

 .tab-box {
    border-bottom: 1px solid #666666;
    padding-bottom:5px;
 }

.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;
 }

.tab-box a.activeLink { 
  background-color: #eeeeee;
  color:#666666;
  border-bottom: 0; 
  padding: 5px 15px;
 }

.tabcontent {
    padding: 5px;
    width: 99%;
 }

.hide { display: none;}

.small { 
    color: #999; 
    margin-top: 100px; 
    border: 1px solid #EEE; 
    padding: 5px; 
    font-size: 9px; 
    font-family:Calibri; 
}

I am trying to add a margin top to the links.

I have tried adding margin-top:30px; to .tab-box a but it's not adding it.

I need it so if the tabs altogether are bigger than then screen width when they go below each other they are not overlapping.

Here is a fiddle with the full code http://jsfiddle.net/5rZP8/

Upvotes: 1

Views: 2752

Answers (5)

Enrique Urzua
Enrique Urzua

Reputation: 36

a Elements by default are displayed as inline. So in order for the margin to take effect needs this.

In this way the browser will apply margin and padding attributes to the anchor.

http://jsfiddle.net/5rZP8/6/

I updated it so you can see it working.

.tabLink {
    margin-top:30px;
    display:inline-block;
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240938

You were applying it to the element a who is a child of .tabLink.

Instead, apply it to an a element containing the class .tabLink.

a.tabLink {
    margin-top: 30px;
}

jsFiddle example - it works.

Additionally, you would also need to add display:inline-block in order for the margins to take effect.

Upvotes: 3

Stratus3D
Stratus3D

Reputation: 4906

The links need to be block elements for your code to work. Use this to make them block level elements while still preserving their other styling: 

.tab-box a { display: inline-block': }

Once the links are block elements the div will expand to fill them. So now you can simply add:

.tab-box { margin-top: 30px; }

Upvotes: 0

Koen.
Koen.

Reputation: 26959

Inline elements don't work that well with margins. Adding display: inline-block; seems to work:

.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;

  display: inline-block;
  margin-top: 30px;
}

See fiddle: http://jsfiddle.net/5rZP8/2/

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

Please see accepted answer to this question: display:inline with margin, padding, width, height. A link a is an inline HTML element and in CSS will be displayed as display: inline by default. A different value for display property will render differently.

Excerpt:

Please see "Inline formatting contexts" at the CSS spec for the full explanation.

Upvotes: 0

Related Questions