CSS margin top not working

Question

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/

Josh Crozier · Accepted Answer · 2013-11-01T20:47:35.210

3

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.

edited Nov 01 '13 at 20:47

answered Nov 01 '13 at 20:39

Josh Crozier

233,099
56
391
304

1

I was gonna answer this but you are faster. +1 – what is sleep Nov 01 '13 at 20:40

Enrique Urzua · Answer 2 · 2013-11-01T20:52:21.397

1

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;
}

edited Nov 01 '13 at 20:52

answered Nov 01 '13 at 20:44

Enrique Urzua

36
7

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

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.

edited May 23 '17 at 12:03

Community

1
1

answered Nov 01 '13 at 20:38

FelipeAls

21,711
8
54
74

score 0 · Answer 4 · answered Nov 01 '13 at 20:39

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/

score 0 · Answer 5 · answered Nov 01 '13 at 20:42

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; }

CSS margin top not working

5 Answers5