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

html中margin的用法

news 来源：原创 2025/6/27 12:58:52

在 HTML 页面布局中，margin 是 CSS 中用于设置 元素与元素之间的外边距（即元素外部的空白区域） 的属性。

它可以单独设置四个方向的边距：上（top）、右（right）、下（bottom）和左（left）。

一、基本语法

selector {margin: 值;
}

示例：

div {margin: 20px;
}

这表示四个方向的外边距都是 20 像素。

二、四种写法详解

1. 单值写法（四个方向统一边距）

margin: 10px;

表示：上右下左都是 10px

2. 双值写法（上下和左右）

margin: 10px 20px;

表示：

上下：10px
左右：20px

3. 三值写法（上左右下）

margin: 10px 15px 20px;

表示：

上：10px
左右：15px
下：20px

4. 四值写法（上右下左）

margin: 5px 10px 15px 20px;

表示：

上：5px
右：10px
下：15px
左：20px

三、单独设置某个方向的 margin

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

四、常见值类型

px：像素（常用）
%：相对于父元素的宽度（常用于响应式）
auto：自动（可居中元素）
em/rem：相对字体大小的单位

居中元素的常见写法：

div {width: 300px;margin: 0 auto;
}

表示上下边距为 0，左右自动分配（常用于居中块级元素）

五、注意事项

margin 只影响元素之间的空隙，不影响元素自身的内容区域。
margin 合并（margin collapsing）：垂直方向相邻的块级元素的 margin 可能会发生合并（取两者较大值）。

html中margin的用法

在 HTML 页面布局中，margin 是 CSS 中用于设置元素与元素之间的外边距（即元素外部的空白区域） 的属性。它可以单独设置四个方向的边距：上（top）、右（right）、下（bottom…...

编程日记 2025/6/27 12:58:52

网络流量分析 | 流量分析基础

流量分析是网络安全领域的一个子领域，其主要重点是调查网络数据，以发现问题和异常情况。本文将涵盖网络安全和流量分析的基础知识。网络安全与网络中的数据网络安全的两个最关键概念就是：认证（Authentication）和授…...

编程日记 2025/6/27 12:44:58

语音合成之六端到端TTS模型的演进

端到端TTS模型的演进引言Tacotron：奠基之作FastSpeech：解决效率瓶颈VITS：实现高保真和富有表现力的语音SparkTTS：利用LLM实现高效可控的TTSCosyvoice：一种可扩展的多语种TTS方法端到端TTS模型的演进与未来方向引言 …...

编程日记 2025/6/26 13:47:47

文件的读取操作

#import time # 导入time 库 # 打开文件 fileopen("E:\Dasktape/python_test.txt","r",encoding"UTF-8")# 读取文件 print(f"读取文件的所有内容内容:{file.read()}\n") #\n是换行字符 print(f"读取10个字节的文件内容:{file.re…...

编程日记 2025/6/26 3:39:34

【Linux学习笔记】进程的fork创建 exit终止 wait等待

【Linux学习笔记】进程的fork创建 exit终止 wait等待 🔥个人主页：大白的编程日记 🔥专栏：Linux学习笔记文章目录【Linux学习笔记】进程的fork创建 exit终止 wait等待前言1.进程创建1.1 fork函数初识1.2fork函数返回值1.3写时拷…...

编程日记 2025/6/27 12:09:33

一种专用车辆智能配电模块的设计解析：技术革新与未来展望

关键词：智能配电模块、STM32、CAN总线、电子开关、新能源汽车引言：传统配电系统的痛点与智能化转型传统配电系统依赖继电器和保险丝，存在体积大、寿命短、智能化低等缺陷（如图1）。而新能源汽车和无人驾驶技术对配电…...

编程日记 2025/6/22 16:32:16

第TR5周：Transformer实战:文本分类

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 1.准备工作 1.1.加载数据 import torch import torch.nn as nn import torchvision import os,PIL,warnings import pandas as pd warnings.filterwarnings…...

编程日记 2025/6/26 16:53:26

Python爬虫（4）CSS核心机制：全面解析选择器分类、用法与实战应用

目录一、背景与重要性‌二、CSS选择器基础与分类‌2.1 什么是选择器？‌2.2 选择器分类与语法‌ 三、核心选择器详解与实战案例‌3.1 基础选择器：精准定位元素‌3.2 组合选择器：元素关系控制‌3.3 伪类与伪元素：动态与虚拟元素‌3…...

编程日记 2025/6/26 1:08:25

复杂地形越野机器人导航新突破！VERTIFORMER：数据高效多任务Transformer助力越野机器人移动导航

作者： Mohammad Nazeri 1 ^{1} 1, Anuj Pokhrel 1 ^{1} 1, Alexandyr Card 1 ^{1} 1, Aniket Datar 1 ^{1} 1, Garrett Warnell 2 , 3 ^{2,3} 2,3, Xuesu Xiao 1 ^{1} 1单位： 1 ^{1} 1乔治梅森大学计算机科学系， 2 ^{2} 2美国陆军研究实验室&…...

编程日记 2025/6/26 2:10:38

ROS 快速入门教程04

12.激光雷达工作原理激光雷达的作用是探照周围障碍物的距离，按照测量维度可以分为单线雷达和多线雷达。按照测量原理可以分为三角测距雷达和TOF雷达。按照工作方式可以分为固态雷达和机械旋转雷达。本次讲解以TOF雷达为例，雷达发射器发射激光遇到障碍…...

编程日记 2025/6/26 15:24:55

Node.js 开发项目

初始化 npm init## npm install 编辑packege.json 添加，以支持ES6的语法 "type": "module" 连接mysql示例 import db from ./db/ops_mysql.jsconst createTable async () > {const insert_data CREATE TABLE IF NOT EXISTS users (…...

编程日记 2025/6/23 1:35:37

Linux系统下的常用网络命令

1.ping命令作用：用来检测网络的连通情况和分析网络速度；根据域名得到服务器IP；根据ping返回的TTL值来判断对方所使用的操作系统及数据包经过路由器数量。参数：-c 数字：设定ping命令发出的消息包数量，如无…...

编程日记 2025/6/26 8:19:57

【器件专题1——IGBT第1讲】IGBT：电力电子领域的 “万能开关”，如何撑起新能源时代？

一、IGBT 是什么？重新认识这个 “低调的电力心脏” 你可能没听过 IGBT，但一定用过它驱动的设备：家里的变频空调、路上的电动汽车、屋顶的光伏逆变器，甚至高铁和电网的核心部件里，都藏着这个 “电力电子开关的瑞士军刀”…...

编程日记 2025/5/26 6:55:02

C++23 新特性深度落地与最佳实践

一、引言 C 作为一门历史悠久且广泛应用的编程语言，一直在不断发展和演进。C23 作为 C 标准的一个重要版本，引入了许多令人期待的新特性，这些特性不仅提升了代码的可读性、可维护性，还增强了程序的性能和安全性。本文将深入探讨 …...

编程日记 2025/6/25 20:40:57

26考研 | 王道 | 数据结构笔记博客总结

编程日记 2025/6/25 15:46:51

Bolsig+超详细使用教程

文章目录 Bolsig介绍Bolsig的使用 Bolsig介绍 BOLSIG 是一款用于求解弱电离气体中电子玻尔兹曼方程的免费计算程序，适用于均匀电场条件下的群体实验、气体放电及碰撞型低温等离子体研究。在此类环境中，电子分布函数呈现非麦克斯韦特性，其形态…...

编程日记 2025/6/26 23:23:49

基于线性LDA算法对鸢尾花数据集进行分类

基于线性LDA算法对鸢尾花数据集进行分类 1、效果 2、流程 1、加载数据集 2、划分训练集、测试集 3、创建模型 4、训练模型 5、使用LDA算法 6、画图3、示例代码 # 基于线性LDA算法对鸢尾花数据集进行分类# 基于线性LDA算法对鸢尾花数据集进行分类 import numpy as np import …...

编程日记 2025/6/26 7:52:05

C#高级语法--接口

先引用一些通俗一点的话语说明 1. 接口就像“插座标准”（解耦） 🧩 场景：你家的手机充电器（USB-C、Lightning）必须插进匹配的插座才能充电。问题：如果每个手机品牌插座都不一样，你换手机就得换充电器，太麻烦了！💡 接口的作用：定义一个通用的充电口标准（比如U…...

编程日记 2025/6/25 9:32:27

软测面经（私）

测试流程分析需求——>制定测试计划——>设计测试用例——>执行测试——>编写测试报告黑盒测试等价类划分、边界值分析法、猜错法、随机数法、因果图。白盒测试代码检查法、程序变异、静态结构分析法、静态质量度量法、符号测试法、逻辑覆盖法、域测试、…...

编程日记 2025/6/20 13:28:34

线程函数库

pthread_create函数 pthread_create 是 POSIX 线程库（pthread）中的一个函数，用于创建一个新的线程。头文件 #include <pthread.h> 函数原型 int pthread_create(pthread_t *thread, const pthread_attr_t *attr,void *(*s…...

编程日记 2025/5/24 6:41:50

数据结构初阶：排序

概述：本篇博客主要介绍关于排序的算法。目录 1.排序概念及应用 1.1 概念 1.2 运用 1.3 常见的排序算法 2. 实现常见排序算法 2.1 插入排序 2.1.1 直接插入排序 2.1.2 希尔排序 2.2 选择排序 2.2.1 直接选择排序 2.2.2 堆排序 2.3 交换排序 2.3.1 冒泡排序…...

编程日记 2025/6/24 14:49:06

openwrt查询网关的命令

方法一：route -n 方法二：ip route show...

编程日记 2025/5/26 1:42:24

优化非线性复杂系统的参数

非线性项组合的系统对于系统中的每一个复杂拟合，即每一个残差函数，都能表示为非线性方程的趋势，例如较为复杂的系统函数组， from optimtool.base import sp, np x sp.symbols("x1:5") res1 0.5*x[0] 0.2*x[1] 1.…...

编程日记 2025/6/24 7:56:39

【QQMusic项目界面开发复习笔记】第二章

🌹 作者: 云小逸 🤟 个人主页: 云小逸的主页 🤟 motto: 要敢于一个人默默的面对自己，强大自己才是核心。不要等到什么都没有了，才下定决心去做。种一颗树，最好的时间是十年前，其次就是现在&…...

编程日记 2025/5/20 7:49:21

并发编程【深度解剖】

并发介绍谈到并发，随之而来的就是那几个问题。并发并行线程进程注意！！！本篇文章更多用诙谐的语调讲解，为保证易于理解，不够官方正式，所以可以结合AI读本篇文章，并且本文是以 g…...

编程日记 2025/6/20 8:42:55

前端如何连接tcp 服务，接收数据

在传统的浏览器前端环境中，由于浏览器的同源策略和安全限制，无法直接建立 TCP 连接。不过，可以通过 WebSocket 或者使用 WebRTC 来间接实现与 TCP 服务的通信，另外在 Node.js 环境中可以直接使用 net 模块建立 TCP 连接。下面分别…...

编程日记 2025/5/27 17:36:21

用C语言实现——一个中缀表达式的计算器。支持用户输入和动画演示过程。

一、思路概要和知识回顾 1.思路概要 ①中缀表达式计算： 需要处理运算符的优先级，可能需要用到栈结构。 ❗❗如何将中缀表达式转换为后缀表达式？或者直接计算？ 通常，中缀转后缀（逆波兰式）再…...

编程日记 2025/6/25 1:23:38

使用 Pandas 进行多格式数据整合：从 Excel、JSON 到 HTML 的处理实战

前言在数据处理与分析的实际场景中，我们经常需要整合不同格式的数据，例如 Excel 表格、JSON 配置文件、HTML 报表等。本文以一个具体任务（蓝桥杯模拟练习题）为例，详细讲解如何使用 Python 的 Pandas 库结合其他工具&…...

编程日记 2025/6/21 1:21:17

常见游戏引擎介绍与对比

Unreal Engine (UE4/UE5) 主语言：C Unreal Engine 主要使用 C 作为开发语言。C 提供了高性能的底层控制，适用于需要精细调优的 AAA 级游戏。C 在 Unreal 中用于开发核心游戏逻辑、物理引擎等性能要求较高的部分。脚本语言：蓝图（B…...

编程日记 2025/6/26 17:32:07

第十一天主菜单/设置界面过场动画（Timeline）成就系统（Steam/本地）多语言支持

前言对于刚接触Unity的新手开发者来说，构建完整的游戏系统往往充满挑战。本文将手把手教你实现游戏开发中最常见的四大核心系统：主菜单界面、过场动画、成就系统和多语言支持。每个模块都将结合完整代码示例，使用Unity 2022 LTS版本进行演示…...

编程日记 2025/6/27 2:22:45

vue3 使用 vite 管理多个项目，实现各子项目独立运行，独立打包

场景： 之前写过一篇 vite vue2 的配置，但是现在项目使用 vue3 较多，再更新一下 vue脚手架初始化之后的项目，每个项目都是独立的，导致项目多了之后，node依赖包过多，占用内存较多。想实现的效果…...

编程日记 2025/6/24 15:19:45

k8s(9) — zookeeper集群部署(亲和性、污点与容忍测试)

一、部署思路 1、前期设想 zookeeper集群至少需要运行3个pod集群才能够正常运行，考虑到节点会有故障的风险这个3个pod最好分别运行在３个不同的节点上(为了实现这一需要用到亲和性和反亲和性概念)，在部署的时候对zookeeper运行的pod打标签加…...

编程日记 2025/6/27 7:12:06

Linux操作系统复习

Linux操作系统复习一. Linux的权限和shell原理1. Linux从广义上讲是什么从狭义上讲是什么？2. shell是什么？3. 为什么要设置一个shell外壳而不是直接和linux 内核沟通4. shell的原理是什么5. Linux中权限的概念6. 如何提升当前操作的权限7. 文件访问者的…...

编程日记 2025/5/18 22:40:07

深入解析 Linux 中动静态库的加载机制：从原理到实践

引言在 Linux 开发中，动静态库是代码复用的核心工具。静态库（.a）和动态库（.so）的加载方式差异显著，直接影响程序的性能、灵活性和维护性。本文将深入剖析两者的加载机制，结合实例演示和底层原…...

编程日记 2025/6/27 7:43:41

总账主数据——Part 2 科目-1

本文主要介绍在S4 HANA OP中总账主数据的后台配置及前台操作。目录 1. 准备 1.1 科目表的定义(OB13) 1.2 给公司代码分配科目表(OB62) 1.3 定义科目组(OBD4) 1.4 定义留存收益科目(OB53) 1.5 维护科目表层“文本标识” (OBT6) 1.6 维护公司代码层“文本标识” (OBT…...

编程日记 2025/6/20 9:54:24

借助内核逻辑锁pagecache到内存

一、背景内存管理是一个永恒的主题，尤其在内存紧张触发内存回收的时候。系统在通过磁盘获取磁盘上的文件的内容时，若不开启O_DIRECT方式进行读写，磁盘上的任何东西都会被缓存到系统里，我们称之为page cache。可以想象&#xff0…...

编程日记 2025/6/22 16:00:02

✨ Apifox：这玩意儿是接口界的“瑞士军刀”吧！[特殊字符][特殊字符]

——全网最皮最全测评，打工人看了直呼“真香” 📢 友情提醒还在用 Postman 测接口、Swagger 写文档、Mock.js 造假数据、脑细胞搞团队协作？ 停！ 你仿佛在玩《工具人环游记》，而隔壁同事已经用 Apifox 「一杆清台」了…...

编程日记 2025/6/25 13:59:35

《普通逻辑》学习记录——性质命题及其推理

目录一、性质命题概述二、性质命题的种类 2.1、性质命题按质的分类 2.2、性质命题按量的分类 2.3、性质命题按质和量结合的分类 2.4、性质命题的基本形式归纳三、四种命题的真假关系 3.1、性质命题与对象关系 3.2、四种命题的真假判定 3.3、四种命题的对当关系四、四种命题…...

编程日记 2025/6/2 5:04:45

设备接入与APP（应用程序）接入华为云iotDA平台的路径元素有哪些不同？

目录壹、设备接入华为云iotDA 🏢 形象比喻：设备员工，IoTDA 平台安保森严的总部大楼一、📍 平台接入地址总部大楼地址二、🧾 接入凭证出入证 / 门禁卡 / 工牌 1. 设备密钥或证书 2. 预置接入凭证密钥&a…...

编程日记 2025/6/22 1:38:21

【git#4】分支管理 -- 知识补充

一、bug 分支假如我们现在正在 dev2 分支上进行开发，开发到一半，突然发现 master 分支上面有 bug，需要解决。在Git中，每个 bug 都可以通过一个新的临时分支来修复，修复后，合并分支，然后将临…...

编程日记 2025/5/26 1:02:27

AXOP34062: 40V双通道运算放大器

AXOP34062是一款通用型高压双通道运算放大器，产品的工作电压为2.5V至40V，具有25MHz的带宽，压摆率为10V/μs，静态电流为650A。较高的耐压和带宽使其可以胜任绝大多数的高压应用场景。主要特性轨到轨的输入输出范围低输入失调电…...

编程日记 2025/6/23 18:08:59

OpenCv高阶（十）——光流估计

文章目录前言一、光流估计二、使用步骤1、导库读取视频、随机初始化颜色2、初始化光流跟踪3、视频帧处理循环4、光流计算与可视化5、循环控制与资源释放完整代码总结前言在计算机视觉领域，光流估计是捕捉图像序列中像素点运动信息的核心技术。它描述了图像中每…...

编程日记 2025/6/24 9:26:06

BS客户端的单点登录

1、参数类似于“XXXXX://?userIdsystem&time1696830378038&token38a8ea526537766f01ded33a6cdfa5bd” 2、在config里加一个LoginSecret参数可随意指定一个字符串 3、BS登录代码里会对“LoginSecret的参数值用户ID时间戳”进行MD5加密形成token，与传过来的…...

编程日记 2025/6/25 23:49:48

通讯录完善版本（详细讲解+源码）

目录前言一、使通讯可以动态更新内存 1、contact.h 2、contact.c 存信息： 删除联系人，并试一个不存在的人的信息，看看会不会把其他人删了编辑修改： 编辑排序： 编辑销毁： 编辑 …...

编程日记 2025/6/21 17:48:02

第3讲：ggplot2完美入门与美化细节打磨——从基础绘制到专业级润色

目录 1. 为什么选择ggplot2？ 2. 快速了解ggplot2绘图核心逻辑 3. 基础绘图示范：柱状图、折线图、散点图（1）简单柱状图（2）折线图示范（3）高级散点图 + 拟合线 4. 精细美化：细节打磨决定专业感 5. 推荐的美化小插件（可选进阶） 6. 小练习：快速上手一幅美化…...

编程日记 2025/6/27 2:11:06

带宽？增益带宽积？压摆率？

一、带宽（Bandwidth） 1.科学定义： 带宽指信号或系统能够有效通过的频率范围，通常定义为信号功率下降到中频值的一半（即 - 3dB）时的最高频率与最低频率之差。对于运算放大器（Op-Amp&#xff09…...

编程日记 2025/6/24 14:49:29

为什么栈内存比堆内存速度快？

博主介绍：程序喵大人 35- 资深C/C/Rust/Android/iOS客户端开发10年大厂工作经验嵌入式/人工智能/自动驾驶/音视频/游戏开发入门级选手《C20高级编程》《C23高级编程》等多本书籍著译者更多原创精品文章，首发gzh，见文末👇&#x1…...

编程日记 2025/6/25 20:16:22

什么是非关系型数据库

什么是非关系型数据库？ 引言随着互联网应用的快速发展，传统的基于表格的关系型数据库（如 MySQL、Oracle 等）已经不能完全满足现代应用程序的需求。在这种背景下，非关系型数据库（NoSQL 数据库&#xff09…...

编程日记 2025/6/25 14:31:34

制作一个简单的操作系统9

自定义 myprintf 函数实现解析探索如何实现一个自定义的 printf 函数来处理任意 %d 和 %s 组合（说实话，想不用任何库函数和头文件，纯C实现太难了，我放弃了，弄了一个简陋版本对付用）运行效果： Hello 123 World 456 Coding这样参数传递：（最多支持5个参数，按顺序…...

编程日记 2025/6/25 18:02:32

华为Pura X的智控键：让折叠机体验更上一层楼的设计

还记得Mate 70系列刚出那会，我体验了下智控键，那时候就觉得这个“把快捷方式做进电源键”的交互方式非常惊艳，没想到在Pura X上，这种便捷体验感更上了一层楼。智控键：折叠屏手机的天选快捷方式？ 传统折叠…...

编程日记 2025/6/25 17:47:58