Placing two images within one div tag

Question

I've been attempting to place two images within a single div, but they're not appearing how I intended.

I'd like there to be some space between the images, but that's not happening.

Here's the CSS I'm using:

.sidebarBody {
    text-align:center;
    padding: 5px;
}

And here is the HTML code:

<div class='sidebarBody'>
    <img src="r.gif" />
    <img src="s.gif" />
</div>

Why isn't the padding being applied to all sides? The second image is displayed right next to the first one without any space in between.

Any assistance would be greatly appreciated. Thank you.

Answer 1

Answer №1

Your current css code does not include any padding around the images, it only sets the enclosing <div>. To add padding, use the following code:

.sidebarBody img {
   text-align:center;
   padding: 5px;
}

This code instructs the browser to apply a 5px padding to each image within the .sidebarBody container (the div class).

Answer 2

Your current css code does not include any padding around the images, it only sets the enclosing <div>. To add padding, use the following code:

.sidebarBody img {
   text-align:center;
   padding: 5px;
}

This code instructs the browser to apply a 5px padding to each image within the .sidebarBody container (the div class).