关于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 字典(Dictionary) fromkeys()方法

    描述 Python 字典 fromkeys() 函数用于创建一个新字典,以序列 seq 中元素做字典的键,value 为字典所有键对应的初始值.高佣联盟 www.cgewang.com 语法 from ...

  2. MOS 预夹断到底是什么

    https://www.cnblogs.com/yeungchie/ MOS管就像一个开关,栅极(Gate)决定源极(Souce)到漏极(Drain)的沟道(Channel)是开还是关.以NMOS为例 ...

  3. luogu P5043 【模板】树同构 hash 最小表示法

    LINK:模板 树同构 题目说的很迷 给了一棵有根树 但是重新标号 言外之意还是一棵无根树 然后要求判断是否重构. 由于时无根的 所以一个比较显然的想法暴力枚举根. 然后做树hash或者树的最小表示法 ...

  4. Hive和HBase

    1. 两者分别是什么? Apache Hive是一个构建在Hadoop基础设施之上的数据仓库.通过Hive可以使用HQL语言查询存放在HDFS上的数据.HQL是一种类SQL语言,这种语言最终被转化为M ...

  5. Python机器学习——预测分析核心算法PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书

    点击获取提取码:7qi1 在学习和研究机器学习的时候,面临令人眼花缭乱的算法,机器学习新手往往会不知所措.本书从算法和Python语言实现的角度,帮助读者认识机器学习. 本书专注于两类核心的" ...

  6. 关于手机数码圈KOL的一两点感想

    复工以来,高峰时段9号线地铁上的人依旧不少,安全距离啥的肯定是不用想了,只是从原来的4G手机换成5G手机以后在某些站能接收到5G信号,我终于能在一些原来根本没信号的站里愉快的刷一刷微博和酷安了. 但是 ...

  7. js 打开新窗体

    function nw(repId,formulaId){ if(!repId){ repId='0' } if(!formulaId){ formulaId='0' } var url='/slsi ...

  8. leetcode 877. Stone Game 详解 -——动态规划

    原博客地址 https://blog.csdn.net/androidchanhao/article/details/81271077 题目链接 https://leetcode.com/proble ...

  9. Windows下的Minio启动命令

    1.首先安装Minio到你的 Windows系统的盘符中,例如D盘 2. 打开dos命令行,进入存放minio.exe的文件夹下,输入 minio.exe server /data  命令,意味着启动 ...

  10. IT技术人，“三十而已”

    最近电视剧<三十而已>热播,我家的电视机自然也是被霸屏,我还是跟着妹纸看了看,开头和结局完整看完,中间看了一点,大部分都是在微信公众号上通过别人的文章看完的.我个人也已经30+了,今天也和 ...