Placing two images within one div tag

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

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).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function of page-break-after: always is not functioning correctly

I want the Div with class questions_visual to appear on the second page when printing. <html> <head> <title>quiz</title> <link rel="stylesheet" href="style.css"> </head> <body> < ...

html css media-queries

What defines a quick or sluggish load time when it comes to a webpage?

Recently, I constructed a webpage with multiple JavaScript elements incorporated. I am wondering what constitutes a fast load time versus a slow one. Currently, my load time is averaging around 490ms with four different JavaScript components. Is this con ...

javascript html

What could be causing the issue with ng-include not functioning properly?

Issue with ng-include Organized Directory Structure : ssh_project --public ----templates ------header.html ------footer.html ----views ------index.html Here is the content of my index.html file <body> <h1>Hello</h1> <div ng ...

javascript html angularjs

The Art of CSS Arrangement

I'm experiencing an issue on my website PSR Is there a way to ensure that the Footer always appears below the content div automatically? Both the Content and the Footer have relative positioning. Additionally, how can I make the Footer the same siz ...

Update the value of a JavaScript variable in an HTML template by targeting the element with a specific

Within my testFile.html HTML file, the following code is present: <div id="image-type-placeholder">marinaa</div> In my JavaScript file: const CourseImageUpload = BaseComponent.extend({ /** * @property {function} */ templat ...

javascript html

I successfully developed a unique custom accordion feature in React.js, where the toggle functionality is fully functional. However, I am currently facing an

import React, { useState, useEffect } from "react"; import axios from "axios"; const Faq = () => { const [faq, setFaq] = useState([]); const [activeIndex, setActiveIndex] = useState(null); const fetchFaqs = async () => { ...

html reactjs api axios

PhantomJS encountered a TypeError when trying to access a non-existent object during the evaluation of 'document.getElementById()'

Recently, I delved into the world of PhantomJS and its ability to extract data from websites through JavaScript. This process is commonly referred to as web scraping. My goal was to retrieve the text content of an element by its ID. However, I encountered ...

javascript html dom web-scraping phantomjs

PHP's $_SESSION variable for passing data between pages

Every time I visit a new page, whether it's a login page or any other, I want to store the name of that page in a $_SESSION variable. For example, on the login page: <?php session_start(); $_SESSION['page'] = 'login.htm&apo ...

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Hello everyone, I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right. Here is the structure of my class: .mover { -webkit-transition:all 0.4s ea ...

jquery animation css

Breadcrumb floating to the right, yet it still manages to obstruct other content, forcing it into a

Within the Breadcrumbs section, I have the path home/profile The desired layout involves floating the Breadcrumbs to the right while keeping the Other contents unfloated to the left. Ver1 -------------------- home/profile -------------------- Ot ...

css reactjs material-ui

Show product name when hovering over the image

Trying to achieve a hover effect where product titles appear in a contained box when hovering over the product image on the bottom overlay, instead of below the image itself. Tried CSS code recommended by Shopify, but it had no effect: <noscript> ...

css shopify mousehover

Prevent scrolling with absolute positioning

Here's a snippet of my HTML pseudocode: <div> <VideoAnimation /> <div className="under-animation"> // a lot of content goes here </div> </div> The issue arises from using absolute positioning on th ...

javascript html css reactjs

Is it a mistake in the Jquery logic or a syntax error?

Is there a logic or syntax error causing one of the options when clicking the radio to not display the corresponding tables with the same number of option dates? <style> #ch2 ,#ch3 ,#ch4 ,#ch5 ,#ch6 ,#ch7 ,#ch8 ,#ch9 ,#ch10 ,#c ...

Strong tags are not functioning properly within paragraph tags in Firefox

It has come to my attention that when I insert <strong> into a <p>, the text does not appear bold. This issue seems to only occur in Firefox, as Chrome and Safari display it correctly. However, when I place <strong> inside a <li>, e ...

Designing an interactive HTML table that adapts to various screen

Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...

javascript jquery html css

Why isn't the parent div stretching alongside its child divs?

Take a look at this example: wthdesign.net/website/olaf&co/index.php I am currently working on creating a responsive layout, but I am struggling to figure out how to make the "#content" div stretch with its child div when there is more content than ex ...

css html layout stretch

Tips on fetching the ID of the selected option using JavaScript without relying on jQuery

Looking to print the selected option ID using pure Javascript (not JQuery) for multiple select tags. If we have more than one select tag, how do we achieve this? <select onchange="showOptions(this)" id="my_select1"> <option value="a1" id="ida ...

javascript html select

Creating margin on a canvas with jsPDF is a simple task that can be accomplished

Hi there, I'm currently working on generating a PDF from HTML using jsPDF, but I've run into an issue with setting page margins. I would really appreciate any assistance on how to add margins to my pages using the canvas object. Below is the sou ...

jquery html pdf jspdf

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...

javascript jquery html css

The background remains hidden from view as a result of its positioning

There seems to be an issue with the background color of my list not displaying correctly. The problem arose after floating elements left and right. Any suggestions on how to resolve this? If you'd like to take a look, here's the link to the fidd ...

html css positioning

CSSer Q&A