【响应式Web前端设计】设置图片间隙为0

解决方案一background
设置父容器的background，可以平铺一个合适的背景或图片。这样的话，两个图片之间的过渡，就会显得更加平滑。但是相关空隙依然存在，只不过因为父容器的背景色的缘故，使得空隙被掩盖了。不过对于本文的路飞例子来说，并没有合适的背景图片或者背景色。
解决方案二font-size（推荐）
设置父容器的font-size为0。这样的话，就可以消除两个图片间的空隙了。这个方案似乎有些匪夷所思，不过确实有效果。不过有些后遗症就是：父容器内的文字大小，会默认继承0。所以，需要对父容器内的显性文字，做特殊设定font-size。

 <div style="text-align: center; font-size: 0;" ><img class="fot" src="data:images/gray1.jpg"><img class="fot" src="data:images/gray2.jpg"><img class="fot" src="data:images/gray3.jpg"><img class=

【响应式Web前端设计】设置图片间隙为0相关推荐

【响应式Web前端设计】一文学会使用Bootstrap！
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具请先学习该文 ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
【响应式Web前端设计】Register Demo
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>用户 ...
【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
【响应式Web前端设计】HTML DOM padding 属性
定义和用法 padding 属性设置元素的内边距. padding 属性定义元素边框与元素内容之间的空间. 该属性可采取 4 个值: 如果规定一个值,比如 div {padding: 50px} - ...
【响应式Web前端设计】Login Demo
body{background: url('../img/1.png')no-repeat center center fixed;background-size: cover;padding: 20 ...
【响应式Web前端设计】Viewport解析
文章目录 1 什么是 Viewport? 2 设置 Viewport 1 什么是 Viewport? viewport 是用户网页的可视区域. viewport 翻译为中文可以叫做"视区&q ...
【响应式Web前端设计】CSS3 :nth-of-type() 选择器
<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) {background:#ff0000; ...

【响应式Web前端设计】设置图片间隙为0

【响应式Web前端设计】设置图片间隙为0相关推荐

最新文章

热门文章