关于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. PHP filectime() 函数

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

  2. JavaScript 你真的了解this指向吗

    JavaScript 你真的了解this指向吗 前言 终于开始写this指向了,相信这对很多JavaScript的学习者来说是一个非常恐怖的环节,个人认为也算是JavaScript中最难理解的一个知识 ...

  3. 【BalticOI2003】Gem 题解（树形DP）

    题目大意: 给树上每一个结点赋值(值为正整数),要求相邻结点的权值不能相同.问树上最小权值和.$n\leq 10000$. ------------------------- 设$f[i][j]$表示 ...

  4. [vue] computed 和 method

    计算属性 计算属性只有在它的相关依赖发生改变时才会重新取值 Method method每次渲染的时候都会被执行 举一个栗子 <template>...<div>  <p& ...

  5. SkyWalking APM8.1.0 搭建与项目集成使用

    SkyWalking介绍 SkyWalking是什么? SkyWalking是一个可观测性分析平台和应用性能管理系统,提供分布式跟踪.服务网格遥测分析.度量聚合和可视化一体化解决方案,并支持多种开发语 ...

  6. Python 告诉你疫情扩散有多可怕

    今年(2020年)是注定要铭记史册的一年,从年初开始新冠疫情,席卷了全球,中国人民众志成城,为战胜疫情做出了巨大牺牲.最近北京疫情形式又变得严峻,面对疫情我们不能掉以轻心.今天我们模拟一下病毒的扩散过 ...

  7. Python下载网络图片方法汇总与实现

    本文介绍下载python下载网络图片的方法,包括通过图片url直接下载.通过re/beautifulSoup解析html下载以及对动态网页的处理等. ​ 很多人学习python,不知道从何学起.很多人 ...

  8. IPv4地址段、地址掩码、可用地址等常用方法

    package com.xxx.iptools; import java.util.ArrayList; import java.util.HashMap; import java.util.List ...

  9. 【av68676164（p25-p30)】同步和P-V操作

    4.5 同步和P-V操作 4.5.1 同步和互斥的概念 进程的互斥关系 例子 进程的互斥关系 多个进程由于共享了独占性资源,必须协调个进程对资源的存取顺序:确保没有两个或以上的进程同时进行存取操作. ...

  10. 静态集成腾讯TBS X5内核WebView，从微信提取新版30M浏览器内核打包进apk

    目录 前情提要 第一步:下载老版本SDK得到jar 获取SDK 集成SDK 步骤二.下载提取最新TBS X5内核 方法1:从微信中提取 方法2:App内内访问tbs调试页安装新内核 步骤三.集成内核到 ...