img标签默认有外边距吗_img 灰色默认外边框的去除

最近在做一个小游戏时发现了一个问题，总是在弹出img时先出现一个灰色的边框，所以为了查找问题，查找了一些关于img 默认边框的小知识点。

在这里整理了一些知识点：

一. 下面代码都试验过后会发现，img会有外边框，这个也是使用img元素的一个坑

一般在img为空时出现，因为浏览器找不到图，就会用一个边框来代替

img外边框

.container-img {

display: inline-block;

width: 36px;

height: 36px;

overflow: hidden;

}

.common-icon {

display: inline-block;

width: 36px;

height: 36px;

}

为了解决这个问题，整理了几个方法：

1. 设置空img的css样式

img[src=""],img:not([src]){

opacity:;

}

第一个为属性选择器(img中src为空的元素)，第二个为反选伪类选择器(src没有的img元素)，将其的opacity设置为空

2.img剪裁方法

(1)负margin

.container-img img {

display: inline-block;

margin: -1px;

width: 38px;

height: 38px;

}

负的边距像能减小元素在文档流中的尺寸一样，但其实它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，所以位置也就发生变化了。还有，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。所以margin = -1px相当于向左上方移动一个像素，所以margin = -1px相当于向左上方移动一个像素，为了让父级元素可以遮住img的边框，需要将img width/height 均加2px，相当与对图片进行剪裁，定位元素方法与这个原理一样。

负margin的使用场景很多，我们很多用的三栏布局的圣杯布局，双飞翼布局都是这么使用的。

(2)绝对定位

.container-img{

position:relative;

}

.container-img img {

position: absolute;

top: -1px;

right: -1px;

width: 38px;

height: 38px;

}

-------------------

作者：chancejl

来源：CSDN

原文：https://blog.csdn.net/qq_39833794/article/details/79922355

版权声明：本文为博主文章，转载请附上博文链接！

去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

...

【SAP BO】处理掉BOE打开Xcelsius报表时，外围出现的外边框(转)

原帖地址:http://blog.csdn.net/liyi199488/article/details/8943286 通过BOE打开Xcelsius报表时,总是出现一个外边框. 处理办法: Xce ...

border 外边框

语法: border: || || =

android 自定义按钮的外边框

<?xml version="1.0" encoding="utf-8"?>

HTML&amp&semi;CSS基础-外边框

HTML&CSS基础-外边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML

HTML 学习笔记 CSS样式(外边框 外边框合并)

CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

jquery实现无外边框table

jquery实现无外边框table 在需要设为无外边框的table上加上class noOutBorder &lt ...

随机推荐

Html标签的语义化

为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1

iOS&comma;应用崩溃日志分析

参考资料:http://www.cocoachina.com/industry/20130725/6677.html 1.获得崩溃日志 2.崩溃日志实例 3.符号化崩溃日志 4.低内存闪退 获得崩溃日 ...

浅谈JavaScript中的能力检测

引言 我们知道,各个版本的浏览器有着许多不一致性.理想状态下,应该是所有的浏览器都提供一套标准的API接口.但是现实中,各个版本的浏览器存在的怪癖非常多,我们通常都是使用客户端检测来作为补救措施.但是 ...

使用uwsgi 部署python web服务

uwsgi, wsgi协议的一个很好的实现,源码在这里:https://github.com/unbit/uwsgi c语言编写,有兴趣可以研究下. 上DEMO: wsgi_server.py def ...

vim 清空

插入模式 首先执行gg 跳至文件首行 然后执行dG就清空了整个文件 还有一种方法就要退出VIM,然后使用echo > file ,这样也能快速清空文件内容

unity 解析tmx 2

using UnityEngine; using System.Collections; using System.Collections.Generic; using System.IO; usin ...

Linux使用tcpdump命令抓包保存pcap文件wireshark分析

[root@ok Desktop]# yum search tcpdump Loaded plugins: fastestmirror, refresh-packagekit, security Lo ...

在html中添加缩放meta

见代码(html)