CSS - What to look for when Margin has no effect

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.

It's a duplicate of Mr Alien's link, not James Donnelly's. Its not the question, its the reason. — Luke Puplett, Aug 01 '13 at 10:20
Ah, for some reason I saw that anchor as a paragraph instead. Silly me! — James Donnelly, Aug 01 '13 at 10:25

score 12 · Accepted Answer · answered Aug 01 '13 at 10:23

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

Nitesh · Answer 2 · 2013-08-01T10:34:25.923

3

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.

edited Aug 01 '13 at 10:34

answered Aug 01 '13 at 10:17

Nitesh

15,425
4
48
60

Does this work when the box-model fix is NOT set? http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – Luke Puplett Aug 01 '13 at 10:22
Nope. Without that too it works. – Nitesh Aug 01 '13 at 10:23
Ok. In practice, for this mark-up at least, it pushes the element up and out over the code in the pre above, rather than move anything down. – Luke Puplett Aug 01 '13 at 10:25
@Luke: `box-sizing` has no effect on margins (unless there was a hypothetical `box-sizing: margin-box`, but it wouldn't even make sense in CSS anyway). – BoltClock Aug 01 '13 at 10:28
Sorry for misunderstanding your question. [I have updated my answer here.](http://stackoverflow.com/questions/17991174/css-what-to-look-for-when-margin-has-no-effect/17991251#17991251) - @LukePuplett – Nitesh Aug 01 '13 at 10:35
@BoltClock - That comment was in response to Nathan's suggestion to use padding, but he's updated his answer. By the way, I marked your answer as err, the answer, but you'd deleted it. – Luke Puplett Aug 01 '13 at 10:41
@NathanLee I assume inline styles are used illustratively on SO. – Luke Puplett Aug 01 '13 at 10:43
Well I assume they are mostly used when they are meant to be used and most importantly to know and solve the OP's purpose of their questions. :) - @LukePuplett – Nitesh Aug 01 '13 at 10:45
@Luke: Oops, I saw Elise's answer which is more comprehensive and entirely right so I removed mine. Anyway, I see you've gone ahead and ticked her answer now. – BoltClock Aug 01 '13 at 10:57

score 0 · Answer 3 · answered Aug 01 '13 at 10:26

0

If you have defined position of the element relative or absolute that time margin value would not work, for this you can try using top

answered Aug 01 '13 at 10:26

Bhojendra Rauniyar

83,432
35
168
231

CSS - What to look for when Margin has no effect

3 Answers3