html行内块元素之间的缝隙
关于html行内块元素之间缝隙的那点儿事情
事情是这样子的，我起初打算验证使用transform属性的标签是否会影响其他的标签的布局，于是写了下面一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum=1.0, minimum=1.0, scalable=0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/* 转换显示模式设置宽高 */
display: inline-block;
width: 100px;
height: 100px;
}
.a {
transform: translateX(100px);
background-color: red;
}
.b {
background-color: blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
结果呢也还算能接受：
但是，我发现了另外一个问题：
这之间的缝隙是什么东东？琢磨了好久也不知道。希望读者中有知道的麻烦评论告诉我一下，谢谢啦。
html行内块元素之间的缝隙的更多相关文章
- 解决行内块元素（inline-block）之间的空格或空白问题
一.问题产生 由于html代码格式化后,标签会缩进或者换行.由于浏览器默认处理导致元素在页面显示中出现单个空格问题,尤其在行内或者行内块元素布局时影响比较明显 例如: 代码 页面显示 二.解决方案 这 ...
- 元素显示模式：块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- css——行内元素和块级元素的具体区别与行内块元素
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
- CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法
我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
- CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block
1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...
- html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
- HTML行内级元素之间的空格问题
HTML行内级元素之间的空格问题 1.为什么元素之间会产生空格? 在编写行内级元素(包括inline-block元素)的代码之间如果有空格(换行),在浏览器上就会显示元素之间有空格. 示例代码如下: ...
随机推荐
- Python File fileno() 方法
概述 fileno() 方法返回一个整型的文件描述符(file descriptor FD 整型),可用于底层操作系统的 I/O 操作.高佣联盟 www.cgewang.com 语法 fileno() ...
- PHP image2wbmp - 输出WBMP图片
image2wbmp — 以 WBMP 格式将图像输出到浏览器或文件.高佣联盟 www.cgewang.com 语法 int image2wbmp ( resource $image [, strin ...
- mit-6.828 Lab01：Booting a PC exercise1.1
Lab01:Booting a PC 目录 Lab01:Booting a PC JOS BIOS 背景知识 8086的基本知识 GDB 常用调试指令 Real mode && Pro ...
- resultMap的用法以及关联结果集映射
resultType resultType可以把查询结果封装到pojo类型中,但必须pojo类的属性名和查询到的数据库表的字段名一致. 如果sql查询到的字段与pojo的属性名不一致,则需要使用res ...
- 32-关键字：abstract
abstract: 抽象的 1.可以用来修饰:类.方法 2.具体的:abstract修饰类:抽象类 * > 此类不能实例化 * > 抽象类中一定有构造器,便于子类实例化时调用(涉及:子类对 ...
- 未来云原生世界的“领头羊”：容器批量计算项目Volcano 1.0版本发布
在刚刚结束的CLOUD NATIVE+ OPEN SOURCE Virtual Summit China 2020上,由华为云云原生团队主导的容器批量计算项目Volcano正式发布1.0版本,标志着V ...
- JS 鼠标放上去滑出内容案例
.sliderbar { width: 200px; height: 40px; position: relative; margin: 0 auto; } .sliderbar span { dis ...
- java循环语句for与无限循环
一 for循环 for循环语句是最常用的循环语句,一般用在循环次数已知的情况下. 格式: for(初始化表达式; 循环条件; 操作表达式){ 执行语句 ……… } 循环流程: for(① ; ② ; ...
- ALGEBRA-3 线性映射
不求甚解 [零空间] 零空间对加法和标量乘法封闭,因此属于子空间:
- C#LeetCode刷题之#100-相同的树（Same Tree）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4066 访问. 给定两个二叉树,编写一个函数来检验它们是否相同. ...