关于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行内块元素之间的缝隙的更多相关文章

  1. 解决行内块元素(inline-block)之间的空格或空白问题

    一.问题产生 由于html代码格式化后,标签会缩进或者换行.由于浏览器默认处理导致元素在页面显示中出现单个空格问题,尤其在行内或者行内块元素布局时影响比较明显 例如: 代码 页面显示 二.解决方案 这 ...

  2. 元素显示模式:块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  3. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  4. CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

  5. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  6. CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  7. __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block

    1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...

  8. html——行内元素、块元素、行内块元素

    行内元素:span  ,a,  ,strong , em,  del,  ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...

  9. HTML行内级元素之间的空格问题

    HTML行内级元素之间的空格问题 1.为什么元素之间会产生空格? 在编写行内级元素(包括inline-block元素)的代码之间如果有空格(换行),在浏览器上就会显示元素之间有空格. 示例代码如下: ...

随机推荐

  1. Python List list()方法

    描述 list() 方法用于将元组转换为列表.高佣联盟 www.cgewang.com 注:元组与列表是非常类似的,区别在于元组的元素值不能修改,元组是放在括号中,列表是放于方括号中. 语法 list ...

  2. PHP filectime() 函数

    定义和用法 filectime() 函数返回指定文件的上次修改时间. 该函数将检查文件的日常修改情况和 inode 修改情况.inode 修改情况是指:权限的修改.所有者的修改.用户组的修改或其他元数 ...

  3. PHP chop() 函数

    实例 移除字符串右侧的字符: <?php$str = "Hello World!";高佣联盟 www.cgewang.comecho $str . "<br& ...

  4. Linux学习笔记之linux软件包安装以及源的替换

    先是软件源的替换,在刚安装的Ubuntu中会配有原先的软件源,所以如果要替换时,可在网上找与自己ubuntu相对应的软件源,比如我的ubuntu版本为12.04,所以我得找到相对应能够适用Ubuntu ...

  5. Go 中的动态作用域变量

    这是一个 API 设计的思想实验,它从典型的 Go 单元测试惯用形式开始: func TestOpenFile(t *testing.T) { f, err := os.Open("notf ...

  6. 【模式识别与机器学习】——PART2 机器学习——统计学习基础——Regularized Linear Regression

    来源:https://www.cnblogs.com/jianxinzhou/p/4083921.html 1. The Problem of Overfitting (1) 还是来看预测房价的这个例 ...

  7. Django中信号signal针对model的使用

    Django中实现对数据库操作的记录除了使用[开源插件]还可以使用信号signal独立实现 信号机制-观察者模式-发布与订阅:signal - 配置 # 文件路径:Django/myapps/__in ...

  8. C#LeetCode刷题之#100-相同的树(Same Tree)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4066 访问. 给定两个二叉树,编写一个函数来检验它们是否相同. ...

  9. C#开发笔记之06-为什么要尽可能的使用尾递归,编译器会为它做优化吗?

    C#开发笔记概述 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/962 访问. 从A函数跳转到B函数,在B函数执行完毕后 ...

  10. sql 语句(精品)

    GROUP BY: select avg(latency),projectName,data_trunc('hour'm\,_time_) as hour group by projectName,h ...