-1

I'm developing the website for a local community centre and I came across an odd problem with my CSS. When I use the margin-bottom property to put some space between two elements, it only seems to work in Firefox. I was able to do a workaround using br tags, but I want to know what was going wrong. Here's an example of code I tested with the same problem.

<!DOCTYPE html>
<html>
<header><title>Example</title></header>
<body>
<p>This is some text.</p>
<br style="margin-bottom:300px;" />
<p>This is some other text.</p>
</body>
</html>

When I view that in Firefox there's a 300 pixel gap between the first paragraph and the second paragraph. When I view it in IE, Chrome, and Safari, there's only the regular gap that a p and br tag would make. What am I doing wrong?

For clarification, I've found this happens with br, img, and p, so moving the style around doesn't help much. Same problem if I put it in the first p tag and take out the br altogether. The original thing where I first noticed the problem, it happened between an image and a p tag.

Sorry if this has been asked/answered before. Lots of similar questions come up on search but none of the answers solved my problem.

Relee
  • 1
  • 1
  • 1
    `
    ` is a special sort of element and not typically styled (although as you've seen, some browsers will respect it). Rather you probably want to put your margin on the `

    `. Check out this question. http://stackoverflow.com/questions/899252/can-you-target-br-with-css

     – numbers1311407 Dec 03 '11 at 19:15

1 Answers1

-1

Change it to a div:

<div style="margin-bottom:300px;"></div>

Like the comment above, br tags are special and usually aren't styled. img tags are inline block elements and p tags are inline I believe.

Usually if something is displayed as an inline element and I want to apply styling to it I use display:block:, such as with spans.

Charlie
  • 11,380
  • 19
  • 83
  • 138