The mysterious behavior of HTML 5 causing images to mysteriously add a 3px margin at the

Question

The mysterious behavior of HTML 5 causing images to mysteriously add a 3px margin at the

Whenever I update my website to

<!DOCTYPE HTML>

Each img element enclosed within a DIV mysteriously acquires a 3px bottom margin, even though no CSS rule defines it. To clarify, there are no style attributes responsible for this 3px bottom margin.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Assuming haha.jpg is sized at 50x50 and .placeholder has display: table set, the observed height dimensions of .placeholder seem to be 50x53...

Has anyone else come across this oddity and found a solution?

UPDATE

Find the JS FIDDLE link below:

http://jsfiddle.net/fRpK6/

css html

Answer 1

Answer №1

The issue at hand stems from the image acting like text, which results in extra space below it as if a character like "y" or "g" were hanging. This problem can be resolved by utilizing the vertical-align CSS property to indicate that no such additional space is required. Any value of vertical-align will suffice; personally, I prefer using middle.

img {
    vertical-align: middle;
}

View this code snippet on jsFiddle: http://jsfiddle.net/fRpK6/1/

Answer 2

The issue at hand stems from the image acting like text, which results in extra space below it as if a character like "y" or "g" were hanging. This problem can be resolved by utilizing the vertical-align CSS property to indicate that no such additional space is required. Any value of vertical-align will suffice; personally, I prefer using middle.

img {
    vertical-align: middle;
}

View this code snippet on jsFiddle: http://jsfiddle.net/fRpK6/1/

Answer 3

Answer №2

One common solution I use is assigning the image element with either display:block or display:inline-block depending on the situation.

Answer 4

One common solution I use is assigning the image element with either display:block or display:inline-block depending on the situation.

Answer 5

Answer №3

My issue has been successfully resolved.

line-height: 0;

Answer 6

My issue has been successfully resolved.

line-height: 0;

Answer 7

Answer №4

In my opinion, applying

line-height: 1;

to the image may resolve this issue, especially when it is positioned as a standalone block.

Answer 8

In my opinion, applying

line-height: 1;

to the image may resolve this issue, especially when it is positioned as a standalone block.

Answer 9

Answer №5

To resolve the issue of images inside floated divs, ensure to add display: block to the image.

Answer 10

To resolve the issue of images inside floated divs, ensure to add display: block to the image.

Answer 11

Answer №6

perhaps the issue lies in the white space causing this problem. here are some potential solutions to try:

img {
display: block;

} or

img {
vertical-align: top/middle/...;

}

or

.placeholder {
font-size: 0;

}

Answer 12

perhaps the issue lies in the white space causing this problem. here are some potential solutions to try:

img {
display: block;

} or

img {
vertical-align: top/middle/...;

}

or

.placeholder {
font-size: 0;

}

Answer 13

Answer №7

It took a mix of

font-size: 0px;
line-height: 0;

on the outer element to solve the issue.

Answer 14

It took a mix of

font-size: 0px;
line-height: 0;

on the outer element to solve the issue.

Answer 15

Answer №8

The reason behind this occurrence is still unclear to me, but try setting the font size of your placeholder div to 0px.

.placeholder {
    font-size: 0px;
}

Answer 16

The reason behind this occurrence is still unclear to me, but try setting the font size of your placeholder div to 0px.

.placeholder {
    font-size: 0px;
}

Answer 17

Answer №9

None of the solutions mentioned above were effective for my specific situation.

I encountered an issue with a wrapping div that had a display: flex; property applied to it.

To resolve the problem, I added align-items: flex-start; to both the wrapping div and all the images within it by applying display: block;.

Prior to explicitly setting the alignment, the layout was not displaying correctly. However, after specifying flex-start, everything fell into place perfectly.

Answer 18

None of the solutions mentioned above were effective for my specific situation.

I encountered an issue with a wrapping div that had a display: flex; property applied to it.

To resolve the problem, I added align-items: flex-start; to both the wrapping div and all the images within it by applying display: block;.

Prior to explicitly setting the alignment, the layout was not displaying correctly. However, after specifying flex-start, everything fell into place perfectly.

Answer 19

Answer №10

Uncertain of the specific issue, but I have attempted two different options to solve it. The first is to apply a class on the img tag, which seems to work. The second option is to set the font size to 0px.

http://jsfiddle.net/fRpK6/4/

Answer 20

Uncertain of the specific issue, but I have attempted two different options to solve it. The first is to apply a class on the img tag, which seems to work. The second option is to set the font size to 0px.

http://jsfiddle.net/fRpK6/4/

Answer 21

Answer №11

One common issue arises when dealing with a series of stacked divs, but this can be easily resolved by simply applying the float property as shown below:

<body>
  <div class="stackedDiv">Some text</div>
  <div class="stackedDiv">Some text</div>
  <div class="stackedDiv">Some text</div>
</body>

Problematic CSS:

.stackedDiv{
    width:100%;
    display:inline-block;   
 }

Solution:

.stackedDiv{
    width:100%;
    display:inline-block;
    float:left; 
 }

Answer 22

One common issue arises when dealing with a series of stacked divs, but this can be easily resolved by simply applying the float property as shown below:

<body>
  <div class="stackedDiv">Some text</div>
  <div class="stackedDiv">Some text</div>
  <div class="stackedDiv">Some text</div>
</body>

Problematic CSS:

.stackedDiv{
    width:100%;
    display:inline-block;   
 }

Solution:

.stackedDiv{
    width:100%;
    display:inline-block;
    float:left; 
 }

The mysterious behavior of HTML 5 causing images to mysteriously add a 3px margin at the

UPDATE

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Similar questions

Conceal element when unchecked

Form on the internet with a following button

WebDriverException: Error: {"errorMessage":"The object is undefined"

What is the best way to extract text directly from a span element without including the text of its child nodes?

Provide users with the option to select a specific destination for saving their file

Issues with JQuery .attr method not functioning as expected

Attempting to display divs at the bottom when hovering over menu options

Concealing and wrapping text using CSS in a table structure

Are you curious about the array of elements in React's carousel?

The background image in the hovering textbox shifts and changes size

What is the best way to trigger a new css animation on an element that is already in the midst of

I am experiencing difficulties with my bootstrap module not loading

Customized placement of form fields on an HTML grid determined by the user

Guide to making a dropdown menu that pulls information from a text box and displays the location within the text

What is the best approach to execute the jquery script exclusively on mobile devices?

Define the position of a scrolled area within an HTML document to create a

What is the best way to create a flexible Ul-LI menu?

jQuery selector unable to locate the specified class in the table row

Issue: $injector:unpr Unrecognized Provider: itemslistProvider <-

Transforming data from PHP JSON format into HTML output