-1

Hey I've stumbled onto something that seems quite simple and almost banal, but I can't just wrap my head around it.

So I've got a website and applied a bit of cascading stylesheet to it.

This is what the top of website looks like

This is the element I'm talking about on top of the website.

Quite simple really, but for some reason I can't seem to use margin, nor padding to influence the first line of text (#FFF white one). Or to be more specific, margin works, just not margin-top (nor negative bottom).

HTML looks something like this

<html>
...
<body>
 <div id = "header">
  <a href="#">I can't margin-top this</a>
  <h1>However it works on this</h1>
</div>
....
</body>

And the stylesheet like this.

My stylesheet

Now, as you may see, the first <a> should be on margin of 20px, however for some weird reason it seems immune to margin (and padding as well). The <h1> below is operational.

Any idea what could be causing this?

Last but not least, here's inspection of the <a> element

The inspection of the <a> element

Probably has a simple solution, but I went out of practice and I can't really figure out what's the issue here.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Samuel Hulla
  • 6,617
  • 7
  • 36
  • 70

1 Answers1

4

inline element cannot take size or vertical margin/padding, give a display:inline-block to <a> and it will accept the margin-top

#header a {
display:inline-block;
/* + here your css rules */
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Worked out. Thanks. Completely forgot about the fact inlines can't be moved. Though out of curiosity, would you recommend doing this? (I know it will work, but it's more of a work-around around the issue. Wouldn't it be better to create a separate div, or maybe paragraph to force it into a block instead, rather than applying it as an inlineblock through CSS?) What is the better "go-to" design option? – Samuel Hulla Feb 29 '16 at 20:12
  • @Rawrplus up to you wich display you want to give, any but inline turns it into a box. inline-block or block level. block is usefull if you want it to use all width avalaible and break line before and after itself – G-Cyrillus Feb 29 '16 at 20:19