Styling an image

I’m a complete newbie to CSS and I have a problem I need help with please.

I am trying to apply styling to the images on a page.

I need 16px radius corners on each plus a 14 px padding above each one, with 4 px padding on the other 3 sides. I used this syntax, but the top padding interferes with the top corners and almost completely eradicates the radius corners

/*Apply padding and wrap text around timeline event images*/
/*Top, right, bottom, left is the order of the px settings*/
/*This is the portrait version*/
.tlimage {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
padding: 14px 4px 4px 4px;
width: 80px;
float: left;
}

Snag_161f027

I am probably making a very basic error, but I’m such a newbie that I don’t know what it is.

TIA

Paul

image

Hi Paul, have you played around with margin rather than padding for your image?

To keep it ultra simple think of margin in the sense of the space around the outside of the content and padding as the space between your content and its border. I’ve attached a picture to help you visualise it.

With margin, that will not affect the appearance of your rounded borders whereas padding is pushing your content away from the borders giving you that odd look you describe.

Do ask if you need any more help.

Thanks. I’ll try margin

Worked a charm. I have now copied that chart onto my desktop for future reference