img标签去间隙以及src为空时的默认边框
2017-11-22 18:57
846 查看
一 间隙问题
多个img图片放在容器中时,会出现间隙,就算设置margin:0也无法解决,类似下图:
请看代码:
定义img宽度为warp容器的25%,但是实际效果img在容器却不能排成一行,而是因为间隙被挤了下去。
因此在查阅相关资料以后,总结以下几种解决方法:
1 .wrap img添加float: right;(设置float后img的会有默认边框,这个下面会解决)
图1
2 弹性布局:img父容器添加display: flex;出现与图1相同的效果。
3 多个img写同一行。
4 img标签首尾相连 ;也可出现与图1相同效果
5 img父标签设置font-size:0;
6 父元素设置letter-space属性为负数。
二 默认边框问题
(未完待续。。。)
多个img图片放在容器中时,会出现间隙,就算设置margin:0也无法解决,类似下图:
请看代码:
定义img宽度为warp容器的25%,但是实际效果img在容器却不能排成一行,而是因为间隙被挤了下去。
因此在查阅相关资料以后,总结以下几种解决方法:
1 .wrap img添加float: right;(设置float后img的会有默认边框,这个下面会解决)
图1
2 弹性布局:img父容器添加display: flex;出现与图1相同的效果。
3 多个img写同一行。
4 img标签首尾相连 ;也可出现与图1相同效果
5 img父标签设置font-size:0;
6 父元素设置letter-space属性为负数。
二 默认边框问题
(未完待续。。。)
相关文章推荐
- img标签src不给路径就会出现边框
- img标签src图片地址找不到显示默认图片
- 移动端---img标签设置了宽高但是src不给路径会出现边框,怎么去掉边框呢
- 我在使用ng-src时图片加载不出来后,Chrome会自动给img标签增边框,解决办法
- img标签默认间隙
- html<img>标签中src=“图片路径”,怎么用变量替换路径
- C#正则表达式提取HTML中IMG标签的SRC地址
- 正则匹配<img src="xxxxxx" alt="" />标签的相关写法
- HTML 修改img标签的src属性
- JavaScript查找Html字符串中的img标签替换src属性的内容
- 关于vue v-for循环解决img标签的src动态绑定问题
- 多个Img标签之间的间隙处理方法
- 原来java的正则也很强大,搜索html文档,根据要求替换img标签中的src属性
- img标签src属性没变,改变起引用的图片,刷新页面仍然显示之前的图片
- line元素img出现默认间隙用vertical-align解决
- A标签实现文件下载以及INPUT隐藏边框样式
- 删除src值为空的img标签
- select标签以及默认选中当前分类问题
- img元素设置背景图以及边框
- 自定义Dialog,去除系统默认黑色背景以及边框并设置dialog的显示位置