CSS - What to look for when Margin has no effect [duplicate]

Question

I'm effectively a noob with HTML and CSS, I don't consistently live in this space to retain and progress so feel free to treat me like an idiot.

Very often when I'm styling a page the margins have no effect. For example, in the following snippet:

<h1>Title</h1>
<p>I introduce the section and talk about the stuff in this area.</p>
<div class="preWrapper">
  <pre><code>I am some XML</code></pre>
</div>
<div class="controlsWrapper">
  <a href="...">Download XML</a>
  < ... form controls, input etc. ... >
<div>

If I try and set a top margin on the Download XML anchor, it has no effect at any size. Why could this be?

Is there a general lesson here about the way this all works that I either keep forgetting or don't quite have a handle on yet.

I have read good-sized CSS books cover-to-cover - I do try - and I've been a netmag subscriber for about 6 years. I know there are lots of quirks and gotchas, I just can't remember them all.

Thanks.

Answer 1

I think in these situations you might be mainly encountering the differences between block-level elements and inline elements.

In HTML, a block level element is used for larger sections of content, and often contains other elements. You use them to lay out everything on your page. Block level elements are, for example, section, div, header.

Inline elements are smaller tags that hold either links or small chunks of texts, like a or span. While block level elements will automatically place themselves on a new line in your layout, inline elements, by definition, will stay exactly where they are in the markup.

Because of this distinction, block level elements can usually be though of as inside an invisible, clearly defined block, that usually spans the width of the page. With a block like this, you can easily imagine padding and margin, because its edges are well defined. Inline elements, however, are tricky, and don't render themselves inside any specific block or rectangle -- their dimensions are defined solely on the text inside them. This is why it is more difficult to apply margins.

A fix in the above would be to give your a a display: block style in the CSS. It will then by default take up the entire width of the page, and its height will be as large as is required by the size of the text. Margins and padding can be easily added.

If you're then faced with not wanting your a to be so wide, but position itself snugly next to other elements, you can change the display property to inline-block -- this can be thought of as kind of half way between block and inline elements. It will only be as wide as the text inside, but it will get that imaginary rectangle around it that can then be made larger with margins and padding.

Here's some reading: The CSS box model

Answer 2

Sorry for misunderstanding your question.

You need convert your <a> into an inline-block element for it to work.

Here is the code.

The Code:

<a href="..." style="display: inline-block; margin-top: 40px;">Download XML</a>

PS: 40px is a dummy value for margin-top. You can replace it with your value.