Help please....basic? padding problem

HTML & CSS
1

Hi there

Can someone please point me in the right direction for the css

I want to add padding Bottom-padding:25px <a> tag on this line. It has an ID of bran4.

<a href=‘/selplus3/index.php?option=com_content&view=article&id=50:article-2-practical-horse-nutrition&catid=37:articles&Itemid=56’ class='readon bran4 ’ >Read more…</a>

I managed to change the H2 size using this CSS
div.bran4 h2 {
font-size: 16px;
}

So i thought it should be
div.bran4.a {
padding-bottom:25px;
}

Currently this piece of CSS styles it
#main-content a, #main-content .separator, #main-content .item {
font-weight:bold;

I cant change this as i need this elsewhere on the site. How do i change the <a> tag using m class suffix???

Many thanks in advance

<span class=’ bran4 '>
</span><div class='contentpaneopen bran4 ’ ><h2 class=‘contentheading bran4 ‘>Article 1 Dispelling the Myths</h2><span class=’ bran4 ‘><p><strong></strong>Do you buy </p>
</span><br/><a href=’/selplus3/index.php?option=com_content&view=article&id=49:article-1&catid=37:articles&Itemid=55’ class='readon bran4 ’ >Read more…</a><span class=“article_separator”> </span>
<div style=“clear: both;”></div></div><div class='contentpaneopen bran4 ’ ><h2 class=‘contentheading bran4 ‘>Article 2 Practical Horse Nutrition</h2><span class=’ bran4 ‘><p>Understanding.<br /><br /> horses.
</span><br/><a href=’/selplus3/index.php?option=com_content&view=article&id=50:article-2-practical-horse-nutrition&catid=37:articles&Itemid=56’ class='readon bran4 ’ >Read more…</a><span class=“article_separator”> </span>
<div style=“clear: both;”></div></div><div class='contentpaneopen bran4 ’ ><h2 class='contentheading bran4 ‘>Article 3 Thoughts on Winter Care & Feeding</h2><span class=’ bran4 '><p><br /> THOUGHTS.<br /><br /> short.<br /><br />Winter riding, especially in ice and snow, <br /><br /><br />A DOZEN WAYS <br /><br />• 1. Get an early start…<br /><br />If you would like to read or publish the full article in your club magazine or newsletter please email us !!

2

You can’t apply padding-bottom to an <a> element because it’s an inline element (more info »). You should make it display block


div.bran4 a {
padding-bottom:25px !important;
display: block;
}

You need the !important because #main-content a takes precedence over .bran4 a (id vs class, id wins).

PS. Use double quotes for attributes in HTML, not single quotes.

3

Wow, really need to get myself a book!!! That works perfectly. Thanks v much for taking the time to explain.

will !important always elevate a class above an id?

4

Hm, come to think of it, !important isn’t the best way to go here, and it’s a tricky statement that can create more problems than it solves if you over-use it.
Better do it this way:


#main-content div.bran4 a {
padding-bottom:25px;
display: block;
}

Take a look at this article.

5

Good citation, Scallio. Steven Bradley does good work.