Margins and DIV's

[CaptainB]

Hi!

I have some boxes positioned in the right hand side of my site. I have made them with CSS + DIVs and set the margin to 10px.

I want to add a "header" to the boxes, which I've done with the <h1></h1> command and styled the h1 tag with CSS. But when I apply the <h1> tag to some text inside my box div, it gets pushed 10px down due to the margin setting in the box div. How can I avoid the box to push it down? Or how would I apply the background color to the textborder without CSS?

[Arbitrator]

I have some boxes positioned in the right hand side of my site. I have made them with CSS + DIVs and set the margin to 10px.It would help if you showed the code that you’re using.

<h1></h1> commandThe correct terminology is “tags”. <h1> is a start tag and </h1> is an end tag.

and styled the h1 tag with CSSYou can’t style a tag. You style “elements”. h1 is the name of an element.

But when I apply the <h1> tag to some text inside my box div, it gets pushed 10px down due to the margin setting in the box div. How can I avoid the box to push it down?Unless you show some code, it will be difficult to definitively address your issue. Based on what you’re saying, it sounds like you just need to remove the margin or declare it to be zero (margin: 0).

[CaptainB]

It would help if you showed the code that you’re using.

Here's the HTML:
<div id="box1">How come that this dosn't work?<br />
I can't get it right...doh!</div>

And here's the CSS for the DIV:
#box1 { background-image:url("box_bg.gif");
width:150px;
margin-top:10px;
}

And here's the CSS for the h1 tag:
h1 { font-family:Tahoma;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
background-color:#000000;
}

And what I did was to place the h1 tags around this:
<div id="box1">How come that this dosn't work?<br />
I can't get it right...doh!</div>

Based on what you’re saying, it sounds like you just need to remove the margin or declare it to be zero (margin: 0).
I tried that but then the space between the boxes dissapears.

[Arbitrator]

I tried that but then the space between the boxes dissapears.

But when I apply the <h1> tag to some text inside my box div, it gets pushed 10px down due to the margin setting in the box div. How can I avoid the box to push it down?

It sounded to me like you wanted the space to disappear so that the content would not get pushed down.

Maybe you want the code shown below?

h1 { margin: 0; }

Or perhaps the below?

h1 { display: inline; }

[CaptainB]

Boy of boy! Forget it, it works. It was jst Dreamweaver, which didn't show it...sorry!!!