• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > img 标签下多余空白的解决方法

img 标签下多余空白的解决方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含img,多余空白等相关知识,佚名 希望在学习及工作中可以帮助到您
1、将图片转换为块级对象

即,设置img为“display:block;”。在本例中添加一组CSS代码:“#sub img {display:block;}”。

2、设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决。如本例中增加一组CSS代码:“#sub img {vertical-align:top;}”。

3、设置父对象的文字大小为0px

即,在#sub中添加一行:“font-size:0;”可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码:“width:88px;height:31px;overflow:hidden;”。

5、设置图片的浮动属性

即在本例中增加一行CSS代码:“#sub img {float:left;}”。如果要实现图文混排,这种方法是很好的选择。

6、取消图片标签和其父对象的最后一个结束标签之间的空格

这个方法要强调下,在实际开发中该方法可能会出乱子,因为在写代码的时候为了让代码更体现语义和层次清晰,难免要通过IDE提供代码缩进显示,这必然会让标签和其他标签换行显示,比如说DW的“套用源格式”命令。所以说这个方法可以供我们了解出现BUG的一种情况,具体解决方案的还得各位见招拆招了。

您可能想查找下面的文章:

  • 解决img在div中居中的问题
  • img图片下面莫名的出现下边距的快速解决方法推荐
  • img使用br换行后之间有空隙的解决方法
  • Css设置img属性让图片水平居中/居左/居右的写法
  • CCS实现input和img水平对齐的方法
  • css中使input输入框与img(图片)在同一行居中对齐
  • div嵌套 img 空白解决方法
  • 让图片img标签在div里上下左右居中的方法
  • img与容器下边界的空隙(缝隙) 的解决方法
  • img 标签下多余空白的解决方法

相关文章

  • 2017-08-06IE6下Select元素被div等元素覆盖的解决办法
  • 2017-08-06CSS浮动所差生的内容溢出问题及清除浮动的方法小结
  • 2017-08-06Photoshop CSS网页制作的背景图 主题的引用样式
  • 2017-08-06CSS字体属性全解析
  • 2017-08-06CSS的animation属性使用实例讲解
  • 2017-08-06多步骤进度条的实现原理及代码
  • 2017-08-06CSS实现HTML背景图片拉伸铺满示例
  • 2017-08-06less让css具有动态语言的特性
  • 2017-08-06css vertical-align属性的一些理解与认识(二) text-top篇
  • 2017-08-06CSS 网页布局中文排版的9则技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css实现瀑布流空白处背景粉色背景块
    • 图片轮换的两边按钮的加载与控制如何通过像素定位
    • css实现的交互小三角箭头图标
    • 旋转任意角度 如何让div旋转一定的角度
    • FORM 不换行的方法
    • 解决IE7下在DD DT中插入a元素导结果列表显示逐级向左
    • filter:drop-shadow有方向的阴影使用说明
    • CSS Sprite从大图中截取小图完整教程
    • 让IE6支持important的注意事项
    • 用CSS3实现背景渐变的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有