My website includes a <div> section that features both an image and a <figcaption>. However, when I attempt to apply padding to the <figcaption>, it does not seem to take effect

I've been trying to troubleshoot this code, but the padding just won't cooperate and I can't seem to figure out why.

 .img-caption {
        visibility:hidden;
        width:22%;
        height:435px;
        background-color:#f9f4e3;
        border: 2px solid #000;
        box-sizing:border-box;
        padding-left:2px;
    }
<div class=img-div>
        <img class="image interpreter" src="https://images-na.ssl-images-amazon.com/images/I/41ffYO-4WQL.jpg">
        <figcaption class="img-caption interpreter-caption"><h3>Interpreter of Maladies</h3><p>Sit tempor amet dolor sanctus sed clita consetetur et justo, et et et gubergren lorem dolor ea dolor. Aliquyam sed.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus provident id aut tenetur, nam reprehenderit nesciunt, saepe iste animi perferendis ipsum recusandae praesentium? Aliquid nisi reiciendis at debitis est impedit.</p></figcaption>
        </div>

css

Answer №1

Your CSS class img-caption is currently set to invisible, which means the padding and other elements within it are not visible. By changing the visibility to visible using visibility:visible;, you will be able to see the figcaption and observe that the padding is being applied properly.

.img-caption {
    visibility:visible;
    width:22%;
    height:435px;
    background-color:#f9f4e3;
    border: 2px solid #000;
    box-sizing:border-box;
    padding-left:2px;
}
<div class=img-div>
    <img class="image interpreter" src="https://images-na.ssl-images-amazon.com/images/I/41ffYO-4WQL.jpg">
    <figcaption class="img-caption interpreter-caption"><h3>Interpreter of Maladies</h3><p>Sit tempor amet dolor sanctus sed clita consetetur et justo, et et et gubergren lorem dolor ea dolor. Aliquyam sed.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus provident id aut tenetur, nam reprehenderit nesciunt, saepe iste animi perferendis ipsum recusandae praesentium? Aliquid nisi reiciendis at debitis est impedit.</p></figcaption>
    </div>

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

Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...

htmlcss

What can I do to resolve the problem with td border

Check out my website over at browsethewebclean.com I've come across a peculiar issue with the borders and background color of some nested tables on my page. It seems that the border is not aligning properly and the background color goes beyond the im ...

csshtmlhtml-table

Creating visually appealing tables with nested tables using CSS for styling including borders and backgrounds

Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS: . ...

htmlcss

Adding a background color to the body of your PHP and HTML email template is a simple way to enhance

I am currently using a confirmation email template with a white background, but I want to change it to gray. However, I'm unsure how to update the PHP file containing the email function below: $headers = "From: " . stripslashes_deep( html_entity_deco ...

phphtmlcsshtml-email

Can you explain the distinction between ' &:hover' and ' & :hover' pseudoclass selectors?

While styling a Material-UI Button, I encountered an unexpected behavior when adding hover effects. When using & :hover, only the inner span of the button was affected. However, when using &:hover, the desired style was achieved. What is the diff ...

csssassmaterial-ui

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

javascripthtmlcssangularangular2-template

When floated to the right, the element is being pushed onto the next line in Firefox

Within a div, there are four elements. I specifically want the last element to be positioned on the far right, so I applied float: right to it. However, in Firefox, the last element gets pushed to the end of the next line instead. This issue does not occ ...

htmlcssfirefox

The synergy between HTML and JavaScript: A beginner's guide to frontend coding

I have primarily focused on server-side development of enterprise applications (Java EE, Spring framework). However, I am now exploring client-side technologies for better understanding (not necessarily to become an expert). I have studied HTML and CSS th ...

javascripthtmlcss

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Looking at this code snippet, my goal is to have all the boxes rotate 180deg with a single click, without needing to apply different ID names: function rotateAllBoxes() { var boxes = document.getElementsByClassName("box"); for (var i = 0; i < box ...

javascriptcss

Launch the jQuery Fancybox on a separate webpage

I am facing an issue where I have a link in my index.html page and I need it to open a div located in another page named index2.html, but for some reason, it is not working. This is the code I currently have: Link in index.html <a href="#modal" id="o ...

javascriptjqueryhtmlcss

I am encountering an issue with the jquery.min.js file not loading when I try to utilize the Google CDN for jQuery

Currently in the process of learning about jQuery and testing its functionality, however, I am facing an issue where changes are not being reflected. The error message states that it is unable to load. I have confirmed that I am using Google CDN and also h ...

htmljquerycssvisual-web-developer

The shading of the box isn't displaying the correct color in Microsoft Edge and IE 11

I have a unique pattern consisting mainly of white and grey hues. To add a touch of color, I am using the box shadow property in CSS to apply a blue filter effect. This technique successfully displays the desired result in Firefox and Chrome browsers. Howe ...

cssinternet-explorermicrosoft-edge

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

htmlcssangularlaravel-5

When running `node compile.js`, no combined CSS file is being created

I have finally mastered the art of setting up and executing the "node compile.js" file in the claro theme folder to compile each *.less file into its corresponding *.css file. However, I noticed that the old claro.css file remains unchanged. Is this the in ...

cssnode.jsdojothemescustomization

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

javascripthtmlcss

After a single click, the functionality of jquery.nav.js seems to be malfunctioning

Encountering an error message: Uncaught TypeError: Cannot read property 'top' of undefined(…) jquery.nav.js:183 In an effort to convert my web app into a Single Page Application (SPA) using the jquery.nav.js library (available at https://githu ...

javascriptjqueryhtmlcss

Position the icon to the left side of the button using Bootstrap

Need help with centering text on a bootstrap 3 button while aligning the font awesome icon to the left side. <button type="button" class="btn btn-default btn-lg btn-block"> <i class="fa fa-home pull-left"></i> Home </button> Usi ...

htmlcsstwitter-bootstrap-3

Automatically Populate Text Field with the URL of the Current Page

I am hoping to automatically fill a hidden text field with the URL of the current page so that I can keep track of where form submissions are coming from. This simple solution will help me streamline my inquiry responses and save time. To clarify, upon lo ...

javascripthtmlcssformstextfield

Preserving the position of inline text

I've been working on a button design that I want to make look more realistic by moving the text down 1px inside the button when it's pressed. To achieve this effect, I added an extra pixel to the top and removed one from the bottom. However, the ...

htmlcss

My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Hello there! I've encountered an issue with my drop-down menu. The text within the <a> tags is too long to fit on a single line, and I'm struggling to make it display in two lines instead. I've been experimenting for the past couple o ...

htmlcss