Home/ Questions/Q 7535559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T06:20:01+00:00

The following Code <!DOCTYPE html> <html> <head> </head> <body> <div style=width:200px;height:200px;padding:0px;margin:0px;> <div style=background-color:red;position:relative;display:block;text-decoration:none;padding:0px;margin:0px;> <img

  • 0

The following Code 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:200px;height:200px;padding:0px;margin:0px;">
    <div style="background-color:red;position:relative;display:block;text-decoration:none;padding:0px;margin:0px;">
    <img style="padding:0px;margin:0px;width:200px;height:200px;"  src="http://www.google.com/logos/2012/serbia12-hp.jpg">
</div>
</div>
</body>

Has a very strange red border on the bottom, I was not able to figure out why this happnes (both with Chrome and IE).

enter image description here

If i use an Invalid Doctype like (withouth exclamation markt)

<DOCTYPE html>

It works?

What is the reason for this? Why is the image not exactly the same width and height as the outer box (200px by 200px). I have tried everything but have no clue why this happens? Is this an hmtl Bug or what am I doing wrong?

Side Note: This is a much mor complicated HTML construct. The example above does not make sense, but it illustrates the problem. So it would be kind if you could explain why this happens.

Thanks very much!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The default line spacing in your browser does not divide evenly into 200. Because an <img> displays as inline by default, it respects line-spacing. You are seeing the result of this.

    Setting the <img> to display: block; will resolve your issue.

    • 0