Html 包含另一个div和获得意外高度的图像的div_Html_Css

Html 包含另一个div和获得意外高度的图像的div

html css

Html 包含另一个div和获得意外高度的图像的div,html,css,Html,Css,这里，div定义应该与图像的高度相同。但我得到了额外的4像素的高度。有人知道为什么会这样吗 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet.css" rel="stylesheet" /> </head> <body>

这里，div定义应该与图像的高度相同。但我得到了额外的4像素的高度。有人知道为什么会这样吗

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <img src="29.jpg" />
        <div class="definition">
            DEFINITION GOES HERE
        </div>
    </div>
</body>
</html>

body {
    margin: 0;
}

html, body {
    height: 100%;
}

.container {
    position: absolute;
}

.definition {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0;
}

    .definition:hover {
        opacity: 1;
        transition: 2s ease-in;
    }


定义在这里
身体{
保证金：0；
}
html，正文{
身高：100%；
}
.集装箱{
位置：绝对位置；
}
.定义{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
背景色：红色；
不透明度：0；
}
.定义：悬停{
不透明度：1；
过渡：2秒放松；
}

包括CSS重置。这可能是浏览器的问题

它工作得非常好。你所需要做的就是把css代码放在下面

<style>

your codes

</style>


你的密码

我已经用以下链接替换了你的img。它也是一个图像

<img src="http://ww1.prweb.com/prfiles/2011/06/14/8571472/ingredients_icon-kerned.jpg" />

它将以其原始大小显示

完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>

<style>
body {
    margin: 0;
}

html, body {
    height: 100%;
}

.container {
    position: absolute;
}

.definition {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0;
}

    .definition:hover {
        opacity: 1;
        transition: 2s ease-in;
    }
</style>
<body>
    <div class="container">
        <img src="http://ww1.prweb.com/prfiles/2011/06/14/8571472/ingredients_icon-kerned.jpg" />
        <div class="definition">
            DEFINITION GOES HERE
        </div>
    </div>
</body>
</html>


身体{
保证金：0；
}
html，正文{
身高：100%；
}
.集装箱{
位置：绝对位置；
}
.定义{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
背景色：红色；
不透明度：0；
}
.定义：悬停{
不透明度：1；
过渡：2秒放松；
}
定义在这里

此问题是由默认img标签边距引起的

添加到css

.container img { display:block; float:left; }

请查看此解决方案。=>

有一件事经常会弄乱布局，那就是标签之间的空白。尝试删除

容器中所有不必要的空白。如果pietu1998的解决方案不起作用，放一个JSFIDLE，可能会有帮助。你是说不间断的空格还是什么？为什么要使用float:left？