首先我们观察一组案例：

HTML结构很简单：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <style>

        div {

            padding: 10px;

        }

    </style>

</head>

<body>

<div>

    <img src="el080107235.jpg" alt="">

    <img src="el080107235.jpg" alt="">

</div>

</body>

</html>

仔细观察图片，我们可以看到在图片的右侧和底部分别有4px、2px的空隙，一般来说，我们并不需要它们。那要怎么除掉呢？

方法一：display: block;

<img>标签是一个内联元素标签，为了美化排版，W3C 默认给内联元素一个4px的右侧间距，所以，我们给<img>添加样式display:block就可以了，如图：

就此，我们还可以推断出下面的方案：

方法二：float：left;

方法三：vertical-align: top;

【css】—— inline-block 4px 和图片底部 2px bug的更多相关文章

  1. css line-height & 图片底部间隙的处理

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里 . line-height 的学习 line-heigh ...

  2. css插入背景图片底部有白边的解决方法

    相信很多小伙伴遇到过用CSS插入背景图时,底部出现白边的情况,如下图:   个人总结了2个方法如下: 解决方法1:给图片都加上 vertical-align: middle属性.有时,移动端也会有类似 ...

  3. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  4. img图片底部出现莫名的下边距问题

    谷歌中这样是解释的: 图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的.所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多. ...

  5. line-height与图片底部间隙的学习整理转述

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里: line-height,两行文字的基线之间的距离: 基 ...

  6. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  7. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  8. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  9. 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

随机推荐

  1. Rigidbody中 Angular Drag （角阻力）：

    Rigidbody中 Angular Drag  (角阻力):同样指的是空气阻力,只不过是用来阻碍物体旋转的.如果设置成无限的话,物体会立即停止旋转.如果设置成0,物体在上升过程中,会发生侧翻旋转. ...

  2. 输入输出参数 inout

    输入输出参数 inout 函数参数默认是常量.试图在函数体中更改参数值将会导致编译错误(compile-time error).这意味着你不能错误地更改参数值.如果你想要一个函数可以修改参数的值,并且 ...

  3. quartz cron表达式demo

    1.每天0点5分开始,以后每隔15分钟启动一次,23:50停止: 0 5/15 0-23 * * * cron表达式,由于从5分开始,每15分钟执行一次,到了23点的最后一次执行时间正好是23:50. ...

  4. Golang之interface（多态，类型断言）

    多态用法 package main //一种事物的多种形态,都可以按照统一的接口进行操作 //多态 import ( "fmt" "math/rand" &qu ...

  5. 如何使用vsphere client 克隆虚拟机

    vSphere 是VMware公司推出一套服务器虚拟化解决方案. 工具/原料 vSphere 测试系统 方法/步骤 1.进入vSphere client,关闭需要克隆的虚拟机win7 2.选中ESXi ...

  6. Java Thread系列（二）线程状态

    Java Thread系列(二)线程状态 一.线程的五种状态 新建状态(New):新创建了一个线程对象,尚未启动. 就绪状态(Runnable):也叫可运行状态.线程对象创建后,其他线程调用了该对象的 ...

  7. http://www.atool.org/keytype.php#0-tsina-1-53371-397232819ff9a47a7b7e80a40613cfe1

    http://www.atool.org/keytype.php#0-tsina-1-53371-397232819ff9a47a7b7e80a40613cfe1

  8. jQuery自定义动画

    $(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...

  9. swoole实现websocket推送

    环境配置:      swoole 1.9.3.centos6.5(虚拟机).PHP7.01   思路:      ①通过server中的collections取出fd      ②写一个admin. ...

  10. redis 工具

    搜索关键词:redis 工具 推荐:http://redisdesktop.com/download 点评:使用顺手,顺畅. ★★★★★ 五星好评 备注:redis key 可以采用某种format ...