首页 > 其他分享 >2024-12-11《元素块级和行内》

2024-12-11《元素块级和行内》

时间:2024-12-29 15:01:10浏览次数:1  
标签:11 块级 行内 span 元素 2024 空白 换行符

学习元素之间空白的产生之前,我们需要知道块级元素与行内元素的区别

块级元素是会独占一行的,按垂直方向排列。

行内元素不会占据整行,在一条直线上排列,都是同一行,按水平方向排列

除了块级元素和行内元素,还有一种行内块元素,其实质上也是行内元素,所以多个行内块元素之间也会出现空白间隔的问题。img元素就是典型的行内块元素,这里就不举例了。

从上面我们可以明显的看出在没有设置margin的情况下,多个块级元素之间没有空白,而是从上到下紧挨这排列的

同样,行内元素span 也没有设置margin,但是多个行内元素之间存在空白部分,这是为什么呢?

因为在html中行内元素间的换行符/空格是有意义的,浏览器会在渲染时将行内元素之间的换行符/空格转换为一定像素的空白。

那知道了这个原因,就应该很容易地解决这个问题了,我们只需要在写代码的时候,将换行符删掉不就可以了吗?来试一试吧

案例1

行内元素span行内元素span行内元素span

标签:11,块级,行内,span,元素,2024,空白,换行符
From: https://www.cnblogs.com/dmx-03/p/18638845

相关文章

  • 11.10图像增强与动漫化相关依赖
    <?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.or......
  • 2024-12-10
    1.2.2创建APIExtensionsServer创建完通用APIServer后继续创建APIExtensionsServer。func(ccompletedConfig)New(delegationTargetgenericapiserver.DelegationTarget)(*CustomResourceDefinitions,error){genericServer,err:=c.GenericConfig.New("apiextensio......
  • 11.8 图像增强与动漫化二
    /**Copyright(C)2017Baidu,Inc.AllRightsReserved.*/packageorg.example;importcom.google.gson.Gson;importcom.google.gson.GsonBuilder;importcom.google.gson.JsonParseException;importjava.lang.reflect.Type;/***Json工具类.*/publiccla......
  • 11.11
    实验1熟悉常用的Linux操作和Hadoop操作1.实验目的Hadoop运行在Linux系统上,因此,需要学习实践一些常用的Linux命令。本实验旨在熟悉常用的Linux操作和Hadoop操作,为顺利开展后续其他实验奠定基础。2.实验平台(1)操作系统:Linux(建议Ubuntu16.04或Ubuntu18.04);(2)Hadoop版本:3.1.3。3.......
  • 2024-2025-1 20241314 《计算机基础与程序设计》第十四周学习总结
    2024-2025-120241314《计算机基础与程序设计》第十四周学习总结作业信息这个作业属于哪个课程<班级的链接>(如2024-2025-1-计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>2024-2025-1计算机基础与程序设计第十四周作业作业正文正文教材学习内容总......
  • 2024-12-12《UML类图》
    UML九图  1.类图类图(ClassDiagram)是面向对象系统建模中最常用和最重要的图,是定义其它图的基础。类图主要是用来显示系统中的类、接口以及它们之间的静态结构和关系的一种静态模型。类图不仅用于可视化描述和记录系统的不同方面,也为构建可执行代码的软件应用程序。类图描述......
  • 11.12
    实验2熟悉常用的HDFS操作  1.实验目的(1)理解HDFS在Hadoop体系结构中的角色;(2)熟练使用HDFS操作常用的Shell命令;(3)熟悉HDFS操作常用的JavaAPI。2.实验平台(1)操作系统:Linux(建议Ubuntu16.04或Ubuntu18.04);(2)Hadoop版本:3.1.3;(3)JDK版本:1.8;(4)JavaIDE:Eclipse。3.实验步骤(一)编......
  • 2024-12-13《构建之法阅读笔记》
    构建之法阅读笔记(1) 第一章概论在这一章中,作者为我们介绍了一些关于软件工程的基本知识。①软件=程序+软件工程:正是因为对软件开发活动(构建管理、源代码管理、软件设计、软件测试、项目管理)相关的内容的完成,才能完成把整个程序转化成为一个可用的软件的过程。扩展的推论......
  • 2024-11-25《Vscode热部署》
    VsCode配置Javaweb热部署(Deploy)   最近又开始使用VsCode来进行web开发,但是每次都需要package一下项目再放到Tomcat下面太繁琐了,就想着能不能像IDEA一样可以进行热部署,经过不懈百度后终于发现了解决方法。首先需要以下三个插件:  首先我们要去创建一个webapp项目,具体的......
  • 2024-11-28《关于mybatis创建的mapper映射路径不对导致的系列报错》
    关于mybatis创建的mapper映射路径不对导致的系列报错 今天在写mybatis项目的时候,使用注解发现无法使用别名,添加ResultMap的时候直接报错显示无法解析。经过百度了好久也是成功的发现了问题的所在,就是这个:这个路径创建的时候我以为创建的是分级目录,实际上创建成为了com.inn......