Coding a space beneath a button

HTML & CSS
1

I’m using a neat joomla 1.5 design for a new community website. I’m pretty familiar with joomla but I can’t find a way to put a little space underneath the Read On button.

This is the CSS for the button -

.button, div a.readon {font-size:10px;
line-height:28px; color:#fff;
height:28px;
padding:0px 16px; font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
background:#74aa07;
display:inline-block;
text-transform:uppercase;
border-radius:5px;
text-decoration:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
position:relative;}

The designer didn’t do it exactly elegantly, but the overall look is good.

Although I have tried all sorts of variations, I can’t find the correct CSS code to stop the button seeming to lay on top of the following item. You can see it here - http://www.schoollaners.org/
Be very pleased to learn the correct way to achieve it.

2

Unless I’ve misunderstood the question just add a margin to the above rule.

e.g.


margin:5px 0 10px;
3

Paul, you are a star. I avoided ‘margin’ with each variation I tried - and now I can’t think why. So your expert helps amounts to a smart smack upon the knuckles for not being adventurous enough, and to the resolving of a considerable worry. The buttons just sitting on top of the following item was ugly. Very grateful for your help. Many thanks
paul

4

Glad to help :slight_smile: