Menu
I am wondering why there is vertical space between the bottom borders of the image and containing div in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns:fb="http://www.facebook.com/2008/fbml"><!--facebook-->
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.box {
border:1px solid black;
}
.image {
border:1px solid red;
}
</style>
</head>
<body>
<div class="box">
<img class="image" src="http://i.imgur.com/o2udo.jpg" />
</div>
</body>
</html>
560
The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag!
It is mostly used with textarea and div elements. To disable resizable property of an element use resize to none. It is the default value. geeks.
The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents.
Images are, by default, inline-replaced elements. This means they are treated like characters.
Some characters (such as p and q) have descenders. Some (such as a and d) do not. Images are akin to the latter.
There needs to be space below the line for the descender to descend into. That is the gap you are seeing.
You can make an image display: block or adjust its vertical-align property to change this.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
