如何解决div里面img图片下方有空白的问题?
空白产生原因: 图片默认的vertical-align是baseline,(元素放置在父元素的基线上,也就是xx下边距)
一个inline-block元素,如果里面没有inline元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,其基线就是元素里面最后一行内联元素的基线。
所以我们只需要将img图片display:block,即可去掉div和img之间的空白
或者将div的line-height设置得足够小,也可以去掉空白,例如div{line-height:5px;}
也可以将font-size设为0,实际上也是改变了line-height
当然,我们可以改变vertical-align,让它不是baseline,比如设置vertical-align:middle
如何解决div里面img图片下方有空白的问题?的更多相关文章
- 图片下方出现多3px的原因及解决方法
产生原因:主要是因为图片的垂直对齐方式vertical-align引发的,默认值是baseline,默认为此值时图片下方就会多出3px. 解决方案: 1.将图片的垂直对齐方式vertical-alig ...
- vertical-align和图片下方空白问题
<style> .box1,.box2{ display: inline-block; background-color:#f0f3f9; width:150px; height: 150 ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- <转载>解决div里面img的缝隙问题
转载自:http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html 练习切图时发现img和父级div之间总是有2px空隙(chrome),上网搜索解决 ...
- 解决div里面img的缝隙问题~
解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...
- javascript焦点图(根据图片下方的小框自动播放)
html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...
- css之图片下方定位遮掩层
需要的效果如图,图片下方加个遮掩层: html: <div class="listContent"> <div><img src="imag ...
- 解决 div或者a标签的高度比里面的img高度多的 问题
今天做练习遇到一个问题,分享一下解决办法: 在编写html中的一个放置图片时,代码如下: <div class="nrtp"> <div class=" ...
- div中的图片跑出来
一:div中的图片跑出来 <style> /* 图片在一行 */ #div1 li{ float: left; list-style: none; } </style> < ...
随机推荐
- Yii2.0 的安装学习
视频学习地址: 后盾网视频: http://www.houdunren.com/houdunren18_lesson_76?vid=7350 与<Yii框架>不得不说的故事—基础篇 htt ...
- vim中,在编辑模式下如何快速移动光标
编辑 ~/.vimrc 配置文件,加入如下行,编辑模式下自定义的快捷键 inoremap <C-o> <Esc>o inoremap <C-l> <Righ ...
- HMAC(Hash-based Message Authentication Code)实现原理
1.HMAC 概念 HMAC(Hash-based Message Authentication Code)基于 hash 的消息验证码,是 安全通信中必要的组成部件. 主要是 防止消息被篡改,和对称 ...
- 笔记-python-urllib
笔记-python-urllib 1. 简介 PYTHON3中将urllib,urllib2整合到URLLIB中 包括以下模块 urllib.request 请求模块(核心) urllib. ...
- Mybatis中接口和对应的mapper文件位置配置详解
Mybatis中接口和对应的mapper文件位置配置详解 原链接为:https://blog.csdn.net/fanfanzk1314/article/details/71480954 今天遇到一个 ...
- fzu1759 Super A^B mod C 扩展欧拉定理降幂
扩展欧拉定理: \[ a^x \equiv a^{x\mathrm{\ mod\ }\varphi(p) + x \geq \varphi(p) ? \varphi(p) : 0}(\mathrm{\ ...
- 用javascript写计算器
本人新手,如果有什么不足的地方,希望可以得到指点 今天尝试用javascript写一个计算器 首先把计算器的按钮做出来,用button做好了,这样可以不用设置太多的样式 <button valu ...
- socketcluster 客户端请求
<html> <head> <title>test</title> <script src="https://cdn.bootcss.c ...
- selenium - 常用浏览器操作方法
常用浏览器操作 (1)初始化浏览器会话: from selenium import webdriver driver = webdriver.Chrome() (2)浏览器最大化操作: driver. ...
- Python学习-day6 面向对象概念
开始学习面向对象,可以说之前的学习和编程思路都是面向过程的,从上到下,一步一步走完. 如果说一个简单的需求,用面向过程实现起来相对容易,但是如果在日常生产,面向对象就可以发挥出他的优势了. 程序的可扩 ...