I am trying to get the h4 to not leave a gap between it and the span. I have tried to make it inline block and then remove the margin which works to get rid of the gap - but then my li’s are all screwed up.
Would really appreciate any thoughts on how I might fix this…
Just as an aside, you can improve that code a lot. As a general rule, it’s better not to have inline elements (img, span etc.) butting up against block elements (h4 etc.) (It can lead to layout problems in some circumstances.)
Rather than using <br> for spacing, use margin/padding instead.
And don’t just use heading elements based on appearance. <h4> has meaning in HTML, and really should only be a heading within a section of text headed by an h3, which is within a section headed by a h2 etc.
The first <br> tag in your original code was fine, the second was apparently being used as a spacer at the bottom. Replaced it with padding applied to the bottom of the <li>, as Ralph recommended, would be a better method. Break tags aren’t necessarily “bad” code, but like all HTML, should be used “appropriately”.
<span>Cras justo aid idifh theis[color=blue]<br>[/color]
egaste quit quam.</span>[color=red][s]<br>[/s][/color]
Not to bump this thread, but I’m trying to recall when and where i was discouraged to use <br> tags - I think i was told that it was on the outs… was this erroneous info?
Break tags are bad when you use them just to make space. They are fine when you want a line break but not fine when you want to end a paragraph because that’s what the p element is for.
Breaks can be used to break a line mid-sentence for a visual effect while you are still in the same paragraph. They are also useful to break lines in poems, addresses and form elements.
They are bad when you use them when there is a more semantic available. They should never be used just to make space though.
I mentioned it in post 5 above. <br> has a purpose in HTML, such as breaking lines in an address or in a poem. But that effectively add meaning or clarity to the content, which is what HTML is for. Using HTML purely for styling (creating visual space etc.) is a misuse of <br>. Use CSS for that instead—things such as margin and padding.
Gayle,
you should code the HTML of your page FIRST. While doing so consider the MEANINg of each piece of content and use the a appropriate HTML tag ( at this point don’t worry about how it looks).
AFTER you ave done so you can use CSS to style any tag to any way you want it to look.
There is really nothing wrong with using H2-H6 inside LIs IF you mean them to be headings and that depends on the SEMANTIC of your content.
<h1>The title of your specific page</h1>
....
<h2>Section title?</h2>
....
<h3>sub section?</h3>
<ul class="column one">
<li>
<img src="images/thumb1.png">
<h4 >Purus Egastas Fusce</h4>
<p class="introP">Cras justo aid idifh theis</p>
<p>egaste quit quam.</p>
<p>egaste quit quam.</p>
</li>
</ul>
CSS
.one {}
.two {}
.column {}
.column h4{ margin:0;
/** other rules for any h4 inside a col**/
}
.column.one h4{ /** other rules for any h4 inside the FIRST (.one) col**/}
.column p{ margin:0; }
.column .introP{ font-style:italic; color:#ccc; /** rules for the first paragraph, in an item of a column**/}
/** other rules**/
So the question is are you using a list because your content is meant to be a list of other content or simply because you want to lay out “columns”. If it’s the latter I’d recommend the use of DIVs over ULs.
