Jump to content

element interactions and margins


Ant

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...