element interactions and margins

[Ant]

I'm almost done with the site and can say I have learned a TON by just doing it and of course ALL THE HELP everyone here has given me. I could not have done it without this place.

 

I'm running into a lot of little problems right now.

 

Here's a for instance. If I place a margin of say 5px on my hr element it's fine and it's how I want it to look when it comes after a p. element. However, when it comes after a photo the margins change because the photo and it's class have a different margin than the p element. I keep running into this situation with various other elements. I don't think putting a 5px margin top/bottom on everything will work. That doesn't seem realistic.

 

What am I doing wrong?

 

Thanks

Ant

[falkencreative]

Margins collapse automatically. Say you have this:

 

<p>text...<p>

<hr />

 

This means that if you have a 20px bottom margin on the <p> and a 5px top margin on the <hr>, the <hr>'s margin will "collapse", which means that the smaller of the two margins will be ignored by the browser. In this case, even though 20+5=25, the margin collapse means there is just a 20px margin between the two elements.

 

Any chance you could use that to your advantage? For example, put a default top margin on the <hr>. If it is larger than the bottom margin just before it, the browser will use it. If it's smaller, the browser will use the margin of the previous element.

[Ant]

Falken, thanks I didn't know that.

 

I understand what you are suggesting.Although I'm not sure i can make it work.

 

What do you do in this situation. Is it something that happens all the time.

 

Am I being too critical?

 

Ant

[falkencreative]

What would I do? I'm not exactly sure. To be honest, I try to avoid using <hr>s, since they tend to have cross-browser issues when styled. I'll often create a .hr class, which has this styling (or a variation of it):

 

.hr { padding-top:20px; margin-top:20px; border-top:1px solid #000000; clear:both; }

 

Then, if I want a hr, I can just add that class, and it will add a line above the element.

 

Otherwise, sometimes it may require some inline styling/additional classes added to the <hr> to solve specific cases.

[Ant]

So what about when this situation occurs with other elements other than hr's ?

[falkencreative]

Depends on the situation.

 

-- Sometimes inline styling, if the issue won't repeat and it isn't worth making a class for it.

-- Sometimes I'll make a class that specifically defines the margins/padding I need.

-- Sometimes I'll take advantage of the margin collapse feature that I was telling you about.

-- Sometimes I'll need to adjust the design to allow me to use more consistent code.

[newseed]

I had issues with <hr> before but I haven't used them in ages. However, I believe my solution was that I used line-height instead of margins. I you want 5px spacing for top/bottom then set your line-height to be 10px;

 

Again, it's awhile since I done this and so I don't even know if modern browsers renders it.

[Ant]

So, hr's are old and shouldn't be used?

 

Falken, thanks for this:

 

Depends on the situation.

 

-- Sometimes inline styling, if the issue won't repeat and it isn't worth making a class for it.

-- Sometimes I'll make a class that specifically defines the margins/padding I need.

-- Sometimes I'll take advantage of the margin collapse feature that I was telling you about.

-- Sometimes I'll need to adjust the design to allow me to use more consistent code.

 

I was wondering when I should use inline styling. I have been trying to avoid it all together.

 

As much control that css gives me it also requires a lot of preparation. So far the biggest challenge I have had in all this is the POSITIONING of elements in web design. It's all very time consuming.

 

Ant