首先我们观察一组案例：

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. shell脚本学习指南-grep文本搜索命令-学习（3）

    1.作用 Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全 ...

  2. 手游热更新方案xLua开源：Unity3D下Lua编程解决方案

    C#下Lua编程支持 xLua为Unity. .Net. Mono等C#环境增加Lua脚本编程的能力,借助xLua,这些Lua代码可以方便的和C#相互调用. xLua的突破 xLua在功能.性能.易用 ...

  3. 33-wxpython多个frame之间的信息共享

    https://blog.csdn.net/xyisv/article/details/78576932 https://blog.csdn.net/tianmaxingkong_/article/d ...

  4. 有关jQuery valid 验证多个同name属性的input的问题

    今天遇到需要动态添加多个同name属性的input框,用jQuery valid进行验证时,没有指定不同的id,验证只会在第一个显示提示信息,因为jQuery valid显示的提示信息是根据每个inp ...

  5. XAMPP非本地访问被拒绝解决办法

    问题场景: 本机搭建一个apache服务器,正常访问XAMPP目录下的页面. 手机接入同一wifi,以电脑ip方式访问该目录下的页面:提示:Access Denied Access to the re ...

  6. android textview 显示一行，且超出自动截断，显示"..."

    android textview 显示一行,且超出自动截断,显示"..." <TextView android:layout_width="wrap_content ...

  7. dojoConfig包的配置（7/26号夜）

    主页代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  8. Sophus VS2010编译不支持？C++11语法的缘故。那有没有不带C++11特性的Sophus版本呢？

    Eigen:3.1 3.0 Ceres:No Sophus: Sophus支不支持Windows编译?官网写的是通过了Windows的编译的 linux, os x:  windows:  code ...

  9. java并发编程实战：第七章----取消与关闭

    Java没有提供任何机制来安全地终止线程(虽然Thread.stop和suspend方法提供了这样的机制,但由于存在缺陷,因此应该避免使用 中断:一种协作机制,能够使一个线程终止另一个线程的当前工作 ...

  10. Spring IOC 和 AOP概述

    IoC(控制反转,(Inversion of Control):本来是由应用程序管理的对象之间的依赖关系,现在交给了容器管理,这就叫控制反转,即交给了IoC容器,Spring的IoC容器主要使用DI方 ...