HTML元素 span,div,p,h,a盒子模型中padding属性的演示和理解

2024-04-04 18:58

本文主要是介绍HTML元素 span,div,p,h,a盒子模型中padding属性的演示和理解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):

所有的元素可以说是盒子模型,但是针对不同的元素,盒子模型中对应的属性在元素设置相应值时的显示效果不一定相同,接下来针对盒子模型中的padding属性,我们来看下span,div,p,h,a这四种元素在设置相同的padding值时的显示效果:

html原码

<html><head><meta charset="UTF-8"><title>不同元素的padding效果测试</title><link rel="stylesheet" type="text/css" href="test_.css"/></head><body><div id="box"><div class="bin"><span class="span">这是span的padding测试</span></div><div class="bin"><div class="div">这是div的padding测试</div></div><div class="bin"><p class="p">这是p的padding测试</p></div><div class="bin"><h4 class="h">这是h的padding测试</div><div class="bin"><a class="a" href="#">这是a的padding测试</a></div></div></body>
</html>

css原码

#box {border:2px solid #FF0000;}
#box .bin {padding: 0px 0px;border: 3px solid #FFA500;text-align: center;margin: 50px 0px;
}
#box .bin .span{padding: 20px 20px;background: #00BFFF;
}
#box .bin .div{padding: 20px 20px;background: #00BFFF;
}
#box .bin .p{padding: 20px 20px;background: #00BFFF;
}
#box .bin .h{padding: 20px 20px;background: #00BFFF;
}
#box .bin .a{padding: 20px 20px;background: #00BFFF;
}

为了更好体现padding属性对不同字段内容展示的影响,所有的元素都放到一个div区块中,并对其中的内容进行了居中,这样在设置元素的padding属性值时,效果更直观和便于比较;

显示结果:

在这里插入图片描述
得出的结论:

1.span中padding属性值并不能影响span元素的所占区间大小,但是padding作为元素盒子模型边界内的效果,依然能够设置与span相同的背景效果,并且该效果能够覆盖其他元素的显示效果;

2.div作为区域块,padding的属性值能够非常直接的显示到div区块的平面布局上,padding的属性值能够影响div的所占区间大小;

3.p作为段落标签,padding的属性值同样能够直接影响到p段落的平面布局,padding的属性值能够影响p的所占空间大小;

4.作为标题标签,padding的属性值同样能够直接影响到h段落的平面布局,padding的属性值能够影响h的所占空间大小;

5.的显示效果同span效果类似,padding属性值并不能影响a元素的所占区间大小,但作为元素盒子模型边界内的效果,依然能够设置与a相同的背景效果,并且该效果能够覆盖其他元素的显示效果;

行内元素诸如span,a这些元素在盒子模型padding效果的演示中,体现出padding属性值并不能对它们真正的空间大小产生影响,但是针对显示效果依然能够体现出来,也就是显示效果跟元素平面空间排版并不是一致的,我们在进行html页面的设计过程中,要充分意识到这一点,更好的加以利用,设计出更优美的页面.

这篇关于HTML元素 span,div,p,h,a盒子模型中padding属性的演示和理解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/876598

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

认识、理解、分类——acm之搜索

普通搜索方法有两种:1、广度优先搜索;2、深度优先搜索; 更多搜索方法: 3、双向广度优先搜索; 4、启发式搜索(包括A*算法等); 搜索通常会用到的知识点:状态压缩(位压缩,利用hash思想压缩)。

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

图神经网络模型介绍(1)

我们将图神经网络分为基于谱域的模型和基于空域的模型,并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络:谱图卷积网络、切比雪夫网络和图卷积网络。 (1)谱图卷积网络 卷积定理:函数卷积的傅里叶变换是函数傅里叶变换的乘积,即F{f*g}