In the realm of HTML5, the figure element presents an interesting challenge when it comes to

Is anyone else noticing that the HTML5 element figure seems to introduce some margin or padding when an image is placed inside it? When a border is added around the figure, there appears to be a slight padding within the element.

<figure>
    <img src="image" alt="" />
</figure>

To reset all margins and paddings using CSS, I used the following code: * { margin: 0; padding: 0 }

Does anyone have any tips on how to address this issue? Feel free to check out this fiddle for reference: http://jsfiddle.net/74Q98/

htmlcss

Answer №1

It is not a glitch specific to the <figure> tag, but rather a common behavior of the <img> element.

To address this issue, you can attempt this solution - VIEW DEMO

img {
    border: 1px solid green;
    display: block;
    vertical-align: top;
}

UPDATE:

Images are initially rendered inline, similar to text, which results in the slight extra space below them due to line height adjustments for characters like q and p.

The provided solution combines two methods to resolve the issue. You can choose to implement either one of these:

img { display: block; }

or

img { vertical-align: top; }

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

Tips for reproducing the line order seen in the image within a React component

Whenever I hover over No.1(text), my goal is to trigger an animation that starts with No. 2 and continues onwards. https://i.sstatic.net/g0lNk.png This code belongs to me. <span ohMouseOver={() => setMenu("design"} className="design& ...

cssreactjscss-animations

Attach a 20% image to the top that remains visible while scrolling

I am working with a Bootstrap Modal Window that includes: An image and a scrollable list of comments related to the image (scrollable with overflow:auto). The Modal window also contains an Add comment Textarea at the bottom. I am looking to implement th ...

javascriptjqueryhtmlcsstwitter-bootstrap

establishing the dimensions of table data cells

I'm facing a challenge with setting the width and height for table data that changes dynamically based on different values. The dimensions of the table itself are not definite, so I need to find a solution. Here's the code snippet I'm curren ...

javascriptcsshtml

Issue with Bootstrap 5 Navbar menu link functionality after implementing 'data-bs-toggle' and 'data-bs-target' properties

I found a solution to the issue with the responsive menu not working as expected after following a post: Bootstrap close responsive menu "on click" When I click on the menu link, it fails to move to the intended section on the page. <link rel="styl ...

htmltwitter-bootstrapbootstrap-5

Expanding two div elements to fill the entire width of the page

I currently have the code in this fiddle: HTML <div class="stats-box"> <div class="stats-title">Stats</div> <div class="stats-group"> <div class="stats-team red"><div class="stats-amount"&g ...

htmlcsssass

Is there a way to rotate a div to exact coordinates?

I am working with two (or perhaps three) coordinates. These coordinates represent the upper left and upper right corners of a shape. My goal is to create a div element where the top-left corner corresponds to the left coordinate, and the top-right corner ...

javascriptjqueryhtmlcss

How to create a three-column CSS layout with a sticky footer and set the columns to have 100%

After merging two different examples: This unique layout was created. http://jsfiddle.net/xVuh5/ Although it is great, I am looking to make the 3 columns 100% height. If anyone can assist, please let me know. Thank you! Here is the body of the html an ...

htmlcsssticky-footer

What is the best way to ensure a NavBar stays at the top of the page when it is not collapsed?

I have integrated a NavBar using Bootstrap 5, which functions flawlessly. However, I am facing a specific issue that I haven't been able to resolve yet: When a user increases their screen size to <300%, it triggers the collapse button to appear. I ...

htmlcssnavbarbootstrap-5

Display only a loading image with a see-through background after submitting the page

After submitting the page, I would like to display a loading image in the middle of the page with a transparent background. The current styling code I have used is as follows: #loading { position: fixed; top: 50%; left: 50%; z-index: 1104; ...

javascripthtmlcsscss-position

Alter the hue of the div

Having trouble with this code snippet: function red(opt) { var sqr; sqr="r"+parseInt(opt); hilight_css = {"background-color":"#f00"}; $(#sqr).css(hilight_css); } I am calling the function like so: red(questions); The variable question ...

javascriptjquerycss

Adding border color and width to an ion-avatar element can be achieved by using CSS properties

I've been struggling to add a border color and width to an ion-avatar element in Ionic 4. I've attempted to use various CSS3 code snippets, but nothing seems to work. This is what I have tried: .ion-avatar img{ width: 90px !important; h ...

cssionic-frameworkionic4

What steps can I take to prevent an HTML box from appearing too close to one side of the screen?

My current goal is to achieve this layout (without the red arrows, of course): https://i.sstatic.net/Mm1rB.png However, I have encountered a CSS issue that I can't seem to figure out on my own. When I view my page, it appears like this: https://i.s ...

htmlcss

Tips for centering all icons in the navbar

* { padding : 0; margin : 0; } nav { padding : 20px; background-color : #809906; list-style : none; border-bottom : 2px solid black; } a { color : black; padding-right : 115px; } a:hover { color : ...

htmlcsscss-position

Is there an efficient method using AJAX and jQuery to validate forms that integrates seamlessly with Django's form models?

It is particularly satisfying when forms validate "live" by alerting the user if the previous field was not valid as they move on to the next one. Which validation options do you prefer using in combination for this purpose? ...

javascriptjquerypythonhtmldjango

Mobile device tab animation

I am facing a challenge with a tab containing four items that are vertically stacked on mobile devices. My goal is to animate the clicked li element to move to the bottom of the stack. After experimenting with CSS animations, I was able to achieve this eff ...

jquerycss

Odd spacing at the bottom of the page

I'm experiencing an issue with the footer on my homepage - it has a strange margin around it that I can't seem to get rid of. What I really want is a simple footer with 100% width, similar to the one on this page. However, as you can see in the i ...

htmlcssfootersticky-footer

Is it possible to add a tooltip to a div without using any JavaScript or JQuery?

I've been working on designing a form that includes tooltips displayed constantly on the right side to assist users in completing their forms. To achieve this, I have separated each part into Divs and added a tooltip for each one. <div title="This ...

javascripthtmlcss

Modifying the array structure will deselect all individual <Input> elements that have been iterated

Hoping to create a system for adding/removing sub-items with buttons that increment/decrement slots in an array, where input fields are automatically added and removed: <div *ngFor="let item of itemsInNewOrder; let i = index"> <input [(ngModel) ...

javascripthtmlarraysangular

Guide on how to delete the right text input based on the deletion of a specific file

Check out my new application by clicking on this link: APPLICATION Here are the steps to follow: Click on the Add Question button to add a file input to the table below: Use the file input to upload 2 images (one at a time). After each s ...

jqueryhtmlajaxupload

I am having trouble playing an mp4 file from my Android phone as an HTML video

Having some trouble playing a video recorded on an Android phone in Chrome on my desktop. The audio plays fine, but the video shows up as just a blank background. Other videos play without issue, but this specific one doesn't seem to work correctly. T ...

androidhtmlvideo