当前位置： 首页 > news >正文

关于前端学习的思考-内边距、边框和外边距

news 2026/3/31 19:59:48

从最简单的盒子开始思考

先把实际应用摆出来：

margin：居中，控制边距。

padding：控制边距。

border：制作三角形。

 

盒子分为内容盒子，内边距盒子，边框和外边距。

如果想让块级元素居中，需要使用margin-left=auto;margin-right=auto;

如果宽度没有，高度没有，这样的居中是无效的。

ad9dc97c91a140009b40b01357ddd38e.png

例如图中的效果，因为宽度没有，高度没有，浏览器自动绘制：宽度横跨浏览器，高度为零。一旦宽度有，比如500px，

f1d1a68fd47949a3a30d64bd9a25267b.png

我们会发现，margin会自动填充，以使得盒子居中，注意这里是指内容盒子居中。那么如果我们去掉水平的auto，又会发生什么呢？

259fb1571a154116b21c38403dd117a4.png

我们发现内容边框是从左往右绘制的，margin，padding，border不设置是不会显示的，那么内边距和外边距同时为auto，它们有没有优先级？

5409b22378464c6e9a367a12e5ad9c79.png

4e16a4db458a4fe68417c029a0a2bbd7.png

如上图，为了严谨一点，我们将padding水平部分和margin水平部分的代码顺序也调换了，代码调换也是浏览器调试时候的小技巧。

所以综上，padding水平和margin水平同时存在的时候，margin水平要先于padding水平。

f34508e17f97432e828486925e43c898.png

而后我们发现无论在任何情况下，padding水平设置auto无效。

所以水平方向只有margin在内容盒子居中方面有贡献。

那么垂直方向的margin又是干嘛的呢？

设置了一遍。

貌似一点用处都没有。。。

 

 

相关文章：

关于前端学习的思考-内边距、边框和外边距

从最简单的盒子开始思考 先把实际应用摆出来： margin：居中，控制边距。 padding：控制边距。 border：制作三角形。 盒子分为内容盒子，内边距盒子，边框和外边距。 如果想让块级元素居中&#…...

编程日记 2023/12/2 10:35:29

【linux】/etc/security/limits.conf配置文件详解、为什么限制、常见限制查看操作

文章目录 一. limits.conf常见配置项详解二. 文件描述符（file descriptor）简述三. 为什么限制四. 相关操作1. 展示当前资源限制2. 查看系统当前打开的文件描述符数量3. 查看某个进程打开的文件描述符数量4. 各进程占用的文件描述符 /etc/security/limits…...

编程日记 2023/12/2 10:33:25

Windows系统下更新后自带的画图软件出现马赛克bug

一.bug的样子🍗 在使用橡皮后，原来写的内容会变成马赛克。而我们希望它是纯白色的。 二.解决方法🍗 第一步 第二步 第三步 三. 解决后的效果🍗 用橡皮擦随便擦都不会出现马赛克了。 更新过后，想用win自带的画图软件会出…...

编程日记 2023/12/2 10:31:24

[HTML]Web前端开发技术6（HTML5、CSS3、JavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…...

编程日记 2023/12/2 10:28:22

SQL练习

建数据库： mysql> create database worker; Query OK, 1 row affected (0.00 sec) mysql> CREATE TABLE worker (-> 部门号 int(11) NOT NULL,-> 职工号 int(11) NOT NULL,-> 工作时间 date NOT NULL,-> 工资 float(8,2) NOT NULL,-> 政治面貌…...

编程日记 2023/12/2 10:25:19

创始人于东来：胖东来员工不想上班，请假不允许不批假！

12月2日早晨，一则关于“胖东来员工不想上班请假不允许不批假”的新闻登上了热搜，引起了广泛关注。熟悉胖东来的网友们可能知道，这并不是这家企业第一次成为热搜的焦点。据白鹿视频12月1日报道，11月25日，河南许昌的胖东…...

编程日记 2023/12/2 10:23:18

C++学习之路（十五）C++ 用Qt5实现一个工具箱（增加16进制颜色码转换和屏幕颜色提取功能）- 示例代码拆分讲解

上篇文章，我们用 Qt5 实现了在小工具箱中添加了《Base64图片编码预览功能》功能。为了继续丰富我们的工具箱，今天我们就再增加两个平时经常用到的功能吧，就是「 16进制颜色码转RGB文本 」和 「屏幕颜色提取」功能。下面我们就来看看如何来规划…...

编程日记 2023/12/2 10:21:16

【STM32】EXTI外部中断

1 中断系统 1.1 中断简介 中断：在主程序运行过程中，出现了特定的中断触发条件（中断源），使得CPU暂停当前正在运行的程序，转而去处理中断程序，处理完成后又返回原来被暂停的位置继续运行。 比如&a…...

编程日记 2023/12/2 10:19:14

Linux系统的常见命令十三，显示系统进程状态、文件权限、修改文件或目录所有者和所属组命令（ps、chmod和chown）

本文主要介绍Linux系统的显示系统进程状态、文件权限、修改文件或目录所有者和所属组命令，（ps、chmod和chown） 目录 显示系统进程状态文件权限设置（chmod）修改文件或目录所有者和所属组（chown） …...

编程日记 2023/12/2 10:18:13

Python 批量修改文件名

主要步骤 通过os.listdir查看该文件夹下所有的文件（包括文件夹）遍历所有文件，如果是文件夹则跳过，或指定跳过指定文件获取文件扩展名按照需求生成新的文件路径文件名进行重命名 代码示例 # -*- coding: utf-8 -*- import osdef…...

编程日记 2023/12/2 10:16:11

git的基本命令操作超详细解析教程

Git基础教学 1、初始化配置2、初始化仓库3、工作区域和文件状态4、添加和提交文件5、git reset 回退版本6、git diff查看差异7、删除文件git rm8、.gitignore9、本地文件提交到远程仓库10、分支基础 Git：一个开源的分布式版本控制系统，它可以在本地和远程…...

编程日记 2023/12/2 10:13:09

【代码】两阶段鲁棒优化/微电网经济调度入门到编程

内容包括 matlab-yalmipcplex微电网两阶段鲁棒经济调度（刘） matlab-yalmipcplex两阶段鲁棒微电网容量经济优化调度 两阶段鲁棒优化CCG列于约束生成和Benders代码，可扩展改编，复现自原外文论文 【赠送】虚拟储能单元电动汽车建…...

编程日记 2023/12/2 10:12:08

【图论】重庆大学图论与应用课程期末复习资料2-各章考点（填空证明部分）（私人复习资料）

图论各章考点 一、图与网络的基本概念二、树三、连通性四、路径算法五、匹配六、行遍性问题七、平面图 一、图与网络的基本概念 生成子图：生成子图 G ’ G’ G’中顶点个数V’必须和原图G中V的数量相同，而 E ’ ∈ E E’∈E E’∈E即可。顶点集导出子图…...

编程日记 2023/12/2 10:11:07

基于Intel® AI Analytics Toolkits的智能视频监控系统

【oneAPI DevSummit & OpenVINODevCon联合黑客松】 跳转链接：https://marketing.csdn.net/p/d2322260c8d99ae24795f727e70e4d3d 目录 1方案背景 2方案描述 3需求分析 4技术可行性分析 5详细设计5.1数据采集 5.2视频解码与帧提取 5.3人脸检测 5.4行为识别…...

编程日记 2023/12/2 10:10:06

深度学习中的注意力机制：原理、应用与实践

深度学习中的注意力机制：原理、应用与实践 摘要： 本文将深入探讨深度学习中的注意力机制，包括其原理、应用领域和实践方法。我们将通过详细的解析和代码示例，帮助读者更好地理解和应用注意力机制，从而提升深度学习模…...

编程日记 2023/12/2 10:08:05

将本地项目推送到github

欢迎大家到我的博客浏览。将本地项目推送到github | YinKais Blog 本地项目上传至 GitHub<!--more--> 1、进入项目根目录&#xff0c;初始化本地仓库 git init 2、创建密钥&#xff1a;创建 .ssh 文件夹&#xff0c;并进入 .ssh 文件夹 mkdir .ssh cd .ssh/ 3、生成…...

编程日记 2023/12/2 10:05:01

[读论文]meshGPT

概述 任务&#xff1a;无条件生成mesh &#xff08;无颜色&#xff09;数据集&#xff1a;shapenet v2方法&#xff1a;先trian一个auto encoder&#xff0c;用来获得code book&#xff1b;然后trian一个自回归的transformermesh表达&#xff1a;face序列。face按规定的顺序&a…...

编程日记 2023/12/2 10:02:59

反序列化漏洞详解（一）

目录 一、php面向对象 二、类 2.1 类的定义 2.2 类的修饰符介绍 三、序列化 3.1 序列化的作用 3.2 序列化之后的表达方式/格式 ① 简单序列化 ② 数组序列化 ③ 对象序列化 ④ 私有修饰符序列化 ⑤ 保护修饰符序列化 ⑥ 成员属性调用对象 序列化 四、反序列化 …...

编程日记 2023/12/2 10:00:57

键盘打字盲打练习系列之指法练习——2

一.欢迎来到我的酒馆 盲打&#xff0c;指法练习&#xff01; 目录 一.欢迎来到我的酒馆二.开始练习 二.开始练习 前面一个章节简单地介绍了基准键位、字母键位和数字符号键位指法&#xff0c;在这个章节详细介绍指法。有了前面的章节的基础练习&#xff0c;相信大家对盲打也有了…...

编程日记 2023/12/2 9:57:54

小程序----使用图表显示数据--canvas

需求&#xff1a;在小程序上实现数据可视化 思路&#xff1a;本来想用的是echarts或者相关的可视化插件&#xff0c;但因为用的是vue3&#xff0c;大多数插件不支持&#xff0c;所以用了echarts&#xff0c;但最后打包的时候说包太大超过2M无法上传&#xff0c;百度了一下&…...

编程日记 2023/12/2 9:56:53

保姆级教程：用Docker Compose一键部署带中文界面的n8n（附汉化包下载）

企业级自动化神器n8n的Docker Compose全栈部署指南 在当今数字化转型浪潮中&#xff0c;自动化工作流工具已成为企业提升效率的刚需。n8n作为一款开源的节点式工作流自动化平台&#xff0c;凭借其强大的集成能力和可视化操作界面&#xff0c;正在技术圈掀起一场效率革命。本文将…...

编程新知 2026/3/31 19:35:12

Node Binance Trader回测功能实战指南：从历史数据到盈利策略

Node Binance Trader回测功能实战指南&#xff1a;从历史数据到盈利策略 【免费下载链接】node-binance-trader &#x1f4b0; Cryptocurrency Trading Strategy & Portfolio Management Development Framework for Binance. &#x1f916; 项目地址: https://gitcode.co…...

编程新知 2026/3/31 19:33:12

浏览器插件：让Markdown预览效率提升300%的秘密武器

浏览器插件&#xff1a;让Markdown预览效率提升300%的秘密武器 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer 作为开发者、学生或技术写作者&#xff0c;你是否经常遇到这些困扰…...

编程新知 2026/3/31 19:14:53

破解招聘时间盲区：Boss Show Time插件如何重构你的求职效率

破解招聘时间盲区&#xff1a;Boss Show Time插件如何重构你的求职效率 【免费下载链接】boss-show-time 展示boss直聘岗位的发布时间 项目地址: https://gitcode.com/GitHub_Trending/bo/boss-show-time 问题发现&#xff1a;招聘信息的时间陷阱 现代求职者每天面临着…...

编程新知 2026/3/31 19:10:41

minikeyvalue架构解密：为什么它比SeaweedFS更简单高效？

minikeyvalue架构解密&#xff1a;为什么它比SeaweedFS更简单高效&#xff1f; 【免费下载链接】minikeyvalue A distributed key value store in under 1000 lines. Used in production at comma.ai 项目地址: https://gitcode.com/gh_mirrors/mi/minikeyvalue minikey…...

编程新知 2026/3/31 18:46:17

DAMO-YOLO智能视觉系统作品集：多场景零售货架检测效果惊艳展示

DAMO-YOLO智能视觉系统作品集&#xff1a;多场景零售货架检测效果惊艳展示 1. 零售视觉检测的新标杆 走进现代零售空间&#xff0c;商品陈列的艺术背后隐藏着复杂的运营挑战。传统的人工巡检方式已经难以满足快节奏零售环境的需求&#xff0c;这正是DAMO-YOLO智能视觉系统大放…...

编程新知 2026/3/31 18:28:02

终极指南：如何将Squire富文本编辑器与现代前端工具链完美集成

终极指南&#xff1a;如何将Squire富文本编辑器与现代前端工具链完美集成 【免费下载链接】Squire The rich text editor for arbitrary HTML. 项目地址: https://gitcode.com/gh_mirrors/sq/Squire Squire是一个轻量级、高性能的HTML5富文本编辑器&#xff0c;专为处理…...

编程新知 2026/3/31 17:45:32

Linux dmesg实战指南：从内核消息解析到故障排查（附实用技巧与常见问题）

1. 初识dmesg&#xff1a;你的Linux系统健康检查仪 刚接触Linux系统管理时&#xff0c;我总把dmesg当成"高级版系统日志"。直到有次服务器突然宕机&#xff0c;才发现这个命令简直就是系统故障的"黑匣子"。想象一下&#xff0c;当你的电脑突然蓝屏&#xf…...

编程新知 2026/3/31 17:13:04

别再只用L1/L2了！用PyTorch实战图像修复的5种高阶损失函数（含VGG19感知损失代码）

超越L1/L2&#xff1a;PyTorch图像修复中5种高阶损失函数的工程实践 当你在深夜调试一个图像超分辨率模型时&#xff0c;发现生成的图片虽然PSNR值很高&#xff0c;但总感觉缺少那种"真实感"——边缘不够锐利&#xff0c;纹理略显模糊。这时候&#xff0c;L1/L2损失函…...

编程新知 2026/3/31 16:15:51

OneMore插件终极指南：160+功能让你的OneNote效率提升3倍

OneMore插件终极指南&#xff1a;160功能让你的OneNote效率提升3倍 【免费下载链接】OneMore A OneNote add-in with simple, yet powerful and useful features 项目地址: https://gitcode.com/gh_mirrors/on/OneMore OneMore是一款免费开源的OneNote增强插件&#xff…...

编程新知 2026/3/31 16:13:47