HTML inline element 之可替换元素
工作中遇到的一个小问题引发的思考
结论
- 正常的 iframe 是
inline
元素 - 但含有 src 这种,
是可替换元素
,可以用 margin 撑开空间,不同于 span 这种普通的 inline 元素 - 检测方法: el.src = “://test”
- 原样返回: 非可替换元素
- 添加 http:// file:// 等返回,则是可替换元素
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.inline {
border: none;
margin-bottom: 100px;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<!-- <iframe class="inline" src="" frameborder="0"></iframe> -->
<img class="inline" src="" alt="">
<!-- <embed class="inline" src="" type=""> -->
<!-- <video class="inline" src=""></video> -->
<!-- <table class="inline"></table> -->
<!-- <button>xx</button> -->
<!-- <span class="inline"></span> -->
<p style="background-color: green;">1</p>
</body>
</html>
参考