div中放入一个img元素导致div高度会多出几个像素

在写代码的时候经常遇到这样一个问题,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px。好了,废话不多说,直接给大家上代码。

html代码:

<div id = "header">
    <img src="img/header.png"/>
</div>

css代码:

#header{
    width : 400px ;
    border : 1px solid #000 ; /* 为了方便观察,此处给div加了1px的边框 */
}
#header img{
    width: 100% ;
}

运行结果如下图:

可以明显看到div实际高度高出img高度3px。为了解决此问题,我们只需要给img元素添加一个display : block ;即可,代码如下:

#header img{
    width : 100% ;
    display : block ;
}

现在再来看运行结果,是不是完全变好了呢?

通过百度了解到原因,原来img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px。

原文地址:https://www.cnblogs.com/huancheng/p/9036001.html

时间: 2024-10-27 10:01:31

div中放入一个img元素导致div高度会多出几个像素的相关文章

如何居中div?如何居中一个浮动元素?

如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"> <head> <meta charset="u

DIV 粘贴插入文本或者其他元素后,移动光标到最新处

此文主要是可编辑div光标位置处理 1:首先 设置一个可编辑的DIV,注意:设置 contenteditable="true" 才可以编辑DIV <div id="talkContent" style="resize: none;height:150px;overflow:auto" contenteditable="true"></div> 2:移动光标js方法 //聊天内容框 插入文本或者其他元素后

HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢?

先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div>块元素</div>与内联元素的差别</p> 在上面的例子中,<div>会自己产生一个新的行,而<span>并没有换行,这是在没有CSS渲染的情况下才这样,同样,我们也可以通过CSS把div定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里

IE下object元素遮挡div表单

目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无法相应,一搜索,确实是这样.那么怎么办呢?万能的搜索啊,终于有两种解决方案: 1,js监听ActiveX控件的行为.(按照网上给的,行不通,监听失败,原因是很多都是10年左右用vc++写的ocx插件的方法,现在行不通) 2,直接通过js控制. 很明显采用第2个方法,于是新的问题就出现了: 怎么调用?

改变div属性的一个实例

<style>#outer{width:500px;margin:0 auto;padding:0;text-align:center;}#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}</style> <script>var changeStyle = function (elem, attr, value){ elem.style[attr] = valu

使用 :after伪元素撑开 div

使用 :after伪元素撑开 div, <html><head><style type="text/css">    .clearfix:after {        content: ".";        display: block;        height: 0;        clear: both;        visibility: hidden;    }</style></head>

span元素和div元素的区别

span元素和div元素的区别:本章节简单介绍一下span元素和div元素的区别,因为这两个元素在布局中非常的常用,可以说几乎没有任何页面不适用这两个元素,下面就简单介绍一下它们两者的主要区别.一.元素的性质:span元素内联元素,而div元素是块级元素.关于两种类型元素的区别可以参阅什么是块级元素和内联元素一章节. 二.元素的使用方式:div元素主要是用作大的框架布局,而span元素则是主要用于对内容的修饰,比如颜色字体大小.代码如下: <!DOCTYPE html> <html>

怎样把一个DIV放到另一个div右下角???

借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: <div id="box1"> <div id="box2">测试内容</div> </div> <style> <!-- #box1{width:600px;height:600px;background:green;position:relative} #box1 #box2{width:200px;height:

一个完美的令div上下左右垂直居中的方法

网上有许多令一个div上下左右垂直居中的方式,都是大同小异,我最喜欢的是还position+transform样式来实现,下面是代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s