块级元素和行内元素不设宽高下设置padding的总结
今天在总结前面学过的CSS时,发现笔记上记了一句“如果盒子没有设置高和宽,那么padding不会撑大盒子”,然后就去探究了一下,结果发现好像没有那么简单,结论写到注释了,只是浅浅的研究了一下,刚入门CSS,纯新手。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
background-color: pink;
/* 1.padding不会占行内元素的实际位置,但是背景色会覆盖padding影响到的位置 */
/* 2.padding会占块级元素的实际位置 */
/* 3. 1 2 两点导致了 行内元素在有padding的情况下仍然以文本位置为准进行流式布局 */
/* 4. 1 2 两点导致了 块级元素设置padding之后 视觉宽高 被重新定义,影响到流式布局 */
padding: 50px;
}
div {
/* 5.背景色的权重:行内元素比块级元素权重高,粉色覆盖了蓝色 */
/* 如果不设置div的padding,仅让该盒子以文字撑开,粉色会完全盖住蓝色 */
background-color: skyblue;
padding: 100px;
}
</style>
</head>
<body>
<span>1234</span>
<div>abcd</div>
<span>我是div下面的span</span>
</body>
</html>
代码运行结果如下:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」