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

class中 padding和margin的用法；

news 2026/3/27 9:30:26

如果我们想要移动盒子等的位置 ，除了可以用相对定位和绝对定位还可以用margin 和paddinng；

结构如图所示

margin和padding的用法：
padding和margin后面可以跟1或2或3或4个数，按照顺序分别是上，右，下，左。具体的操作如下：
（1）padding(margin)-left:10px;左内（外）边距；
（2）padding(margin)-right:10px;右内（外）边距；
（3）padding(margin)-top:10px;上内（外）边距；
（4）padding(margin)-bottom:10px;下内（外）边距；
（5）padding(margin):10px;四边统一内（外）边距；
（6）padding(margin):10px 20px; 10px是上下内（外）边距；20px是左右内（外）边距
（7）padding(margin):10px 20px 30px; 10px是上内（外）边距；20px是左右内（外）边距；30px是下内（外）边距；
（8）padding(margin):10px 20px 30px 40px; 10px是上内（外）边距；20px是右内（外）边距；30px是下内（外）边距；40px是左内边距；

示例效果图

代码

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>优化后的HTML</title><style>.container {display: flex;justify-content: space-between;padding: 20px;}.box {width: 22%;display: flex;flex-direction: column;align-items: center;}.content {width: 100%;height: 30px;display: flex;justify-content: center;align-items: center;background-color: #AAAAAA;border-radius: 8px;margin-top: 10px;}.content.middle {height: 90px;}.content.buttom {height: 60px;}.content.content2_1 {height: 200px;}/* 第三快的弹性 */.box3_2 {width: 100%;justify-content: space-between;display: flex;}.content.box3_2_1 {width: 40%;height: 60px;}</style></head><body><div class="container"><div class="box one"><div class="content top"><p>1</p></div><div class="content middle"><p>1</p></div><div class="content buttom"><p>1</p></div></div><div class="box tow"><div class="content content2_1 "><p>2</p></div></div><div class="box Three"><div class="content"><p>3</p></div><div class="box3_2"><div class="content box3_2_1">3</div><div class="content box3_2_1">3</div></div><div class="content middle"><p>3</p></div></div><div class="box Four"><div class="content"><p>4</p></div><div class="content middle"><p>4</p></div><div class="content buttom"><p>4</p></div></div></div></body></html></body></html>

希望可以帮到大家

相关文章：

class中 padding和margin的用法；

如果我们想要移动盒子等的位置 &#xff0c;除了可以用相对定位和绝对定位还可以用margin 和paddinng&#xff1b; 结构如图所示 margin和padding的用法&#xff1a; padding和margin后面可以跟1或2或3或4个数&#xff0c;按照顺序分别是上&#xff0c;右&#xff0c;下&…...

编程日记 2024/4/18 4:16:26

单独使用YOLOV9的backbone网络

前言 YOLO系列的网络结构都是通过.yaml来进行配置的，当要单独想使用其中的backbone网络时，可以通过yaml配置文件来进行网络搭建。 backbone的yaml配置文件与网络结构 backbone:[[-1, 1, Silence, []], # conv<...

编程日记 2024/4/18 4:15:24

WordPress JS Support Ticket插件 RCE漏洞复现

0x01 产品简介 WordPress和WordPress plugin都是WordPress基金会的产品。JS Support Ticket是使用在其中的一套开源票务系统插件。 0x02 漏洞概述 WordPress中的JS Support Ticket插件存在未经上传漏洞，未经身份验证的攻击者可以上传恶意脚本的服务器，执行任意指令，从而获…...

编程日记 2024/4/18 4:13:22

加盟代理短视频无人直播项目，开启互联网线上经营新模式

随着短视频行业的快速发展和用户数量的不断增长&#xff0c;短视频无人直播项目成为了近年来备受关注的创业机会。本文将分享如何加盟代理短视频无人直播项目&#xff0c;开启属于自己的经营新模式。 一、了解无人直播项目的核心优势 短视频无人直播项目是结合了短视频与直播的…...

编程日记 2024/4/18 4:10:19

spring高级篇（一）

1、ApplicationContext与BeanFactory BeanFactory是ApplicationContext的父级接口&#xff1a;&#xff08;citlaltu查看类关系图&#xff09; 在springboot的启动类中&#xff0c;我们通过SpringApplication.run方法拿到的是继承了ApplicationContext的ConfigurableApplicatio…...

编程日记 2024/4/18 4:08:18

免费的GPT-3.5 API服务aurora

什么是 aurora &#xff1f; aurora 是利用免登录 ChatGPT Web 提供的无限制免费 GPT-3.5-Turbo API 的服务&#xff0c;支持使用 3.5 的 access 调用。 【注意】&#xff1a;仅 IP 属地支持免登录使用 ChatGPT的才可以使用&#xff08;也可以自定义 Baseurl 来绕过限制&#x…...

编程日记 2024/4/18 4:07:15

突破编程_C++_网络编程（Windows 套接字（处理 TCP 粘包问题））

1 TCP 协议与粘包问题概述 1.1 TCP 粘包的产生原因 TCP粘包问题的产生原因涉及多个方面&#xff0c;主要的原因如下&#xff1a; 首先&#xff0c;发送方在发送数据时&#xff0c;由于TCP协议为提高传输效率而采用的Nagle算法&#xff0c;可能会将多个小数据包合并成一个大数…...

编程日记 2024/4/18 4:05:13

【训练营】DateWhale——动手学大模型应用开发（更新中）

文章目录 写在前面大模型简介LLM简介RAG简介LangChain开发框架开发LLM应用的整体流程 写在前面 大模型时代从GPT爆发开始到现在已有一年多了&#xff0c;深度学习发展之快无法想象&#xff0c;一味感叹技术发展速度超越个人学习速度是没用的&#xff0c;倒不如花点时间参加一些…...

编程日记 2024/4/18 4:04:12

【学习笔记十九】EWM Yard Management概述及后台配置

一、EWM Yard堆场管理业务概述 1.Yard Management基本概念 YARD管理针对的是库房以外的区域&#xff0c;可以理解为入大门开始到库门之前的这部分的区域 堆场结构 像在仓库中一样&#xff0c;将相应仓位映射为堆场仓位&#xff0c;可将其分组到堆场分区。场地中可能具有以下结…...

编程日记 2024/4/18 4:01:09

【环境搭建】（五）Ubuntu22.04安装cuda_11.8.0+cudnn_8.6.0

一个愿意伫立在巨人肩膀上的农民...... 设备配置&#xff1a; 一、安装GCC 安装cuda之前&#xff0c;首先应该安装GCC&#xff0c;安装cuda需要用到GCC&#xff0c;否则报错。可以先使用下方指令在终端查看是否已经安装GCC。 gcc --version 如果终端打印如下则说明已经安装…...

编程日记 2024/4/18 3:59:07

【UE5.1】使用MySQL and MariaDB Integration插件——（3）表格形式显示数据

在上一篇&#xff08;【UE5.1】使用MySQL and MariaDB Integration插件——&#xff08;2&#xff09;查询&#xff09;基础上继续实现以表格形式显示查询到的数据的功能 效果 步骤 1. 在“WBP_Query”中将多行文本框替换未网格面板控件&#xff0c;该控件可以用表格形式布局…...

编程日记 2024/4/18 3:58:05

JVM复习

冯诺依曼模型与计算机处理数据过程相关联&#xff1a; 冯诺依曼模型&#xff1a; 输入/输出设备存储器输出设备运算器控制器处理过程&#xff1a; 提取阶段&#xff1a;输入设备传入原始数据&#xff0c;存储到存储器解码阶段&#xff1a;由CPU的指令集架构ISA将数值解…...

编程日记 2024/4/18 3:56:03

63、ARM/STM32中IIC相关学习20240417

完成温湿度传感器数据采集实验。 【思路&#xff1a;1.通过IIC通信原理&#xff0c;理解其通信过程&#xff0c;通过调用封装的IIC函数达成主机和从机之间&#xff1a;起始信号、终止信号、读、写数据的操作&#xff1b; 2.了解温湿度传感器控制芯片SI7006的工作原理&#…...

编程日记 2024/4/18 3:55:02

离岸人民币与人民币国际化

参考 什么是离岸人民币&#xff1f;它有什么用&#xff1f; - 知乎 “人民币就是人民币&#xff0c;为什么要在它前面加上离岸二字&#xff1f;” “既然有离岸人民币&#xff0c;是否有在岸人民币&#xff1f;” 今天我们就简单了解一下什么是离岸人民币。 离岸/在岸人民币…...

编程日记 2024/4/18 3:54:01

Linux平台上部署和运行Ollama的全面指南

Ollama的安装与配置 Ollama提供了一种简单的安装方法&#xff0c;只需一行命令即可完成安装&#xff0c;但是对于想要更深入了解和自定义安装的用户&#xff0c;我们也提供了手动安装的步骤。 快速安装 Ollama的安装极为简单&#xff0c;只需在终端中执行以下命令&#xff1…...

编程日记 2024/4/18 3:51:58

Web---robots协议详解

在Web中&#xff0c;robots协议&#xff08;也称为robots.txt&#xff09;是一种文本文件&#xff0c;用于向搜索引擎机器人&#xff08;通常称为爬虫&#xff09;提供指导&#xff0c;以指示它们哪些页面可以抓取&#xff0c;哪些页面应该忽略。robots.txt文件位于网站的根目录…...

编程日记 2024/4/18 3:50:57

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第四套

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第四套 (共9套&#xff0c;有答案和解析&#xff0c;答案非官方&#xff0c;仅供参考&#xff09;&#xff08;共九套&#xff0c;每套四十个选择题&#xff09; 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadida…...

编程日记 2024/4/18 3:48:55

clipper一些数据结构（入门初识（一））

clipper一些数据结构&#xff08;一&#xff09; Clipper库是一个用于执行多边形裁剪&#xff08;clipping&#xff09;和偏移&#xff08;offsetting&#xff09;操作的开源C库。在Clipper库中&#xff0c;点和多边形&#xff08;polygon&#xff09;是基本的数据结构。Clipp…...

编程日记 2024/4/18 3:45:52

读《SQL基础教程 第二版 上》的一些总结

1. 数据库语言 DDL: Data Definition Language&#xff0c;数据定义语言&#xff08;库、表的操作&#xff09; DML: Data Manipulation Language&#xff0c; 数据操控语言&#xff08;对表中数据的增删改&#xff09; DQL: Data Query Language&#xff0c;数据库查询语言…...

编程日记 2024/4/18 3:44:51

EDI是什么：EDI系统功能介绍

EDI全称Electronic Data Interchange&#xff0c;中文名称是电子数据交换&#xff0c;也被称为“无纸化贸易”。EDI实现企业间&#xff08;B2B&#xff09;自动化通信&#xff0c;帮助贸易伙伴和组织完成更多的工作、加快物流时间并消除人为错误。 目前国内企业实现EDI通信大多…...

编程日记 2024/4/18 3:43:50

OpenClaw技能开发入门：为nanobot镜像编写第一个插件

OpenClaw技能开发入门&#xff1a;为nanobot镜像编写第一个插件 1. 为什么需要自定义技能 当我第一次接触OpenClaw时&#xff0c;最让我惊喜的是它能够像人类一样操作电脑完成各种任务。但很快我发现&#xff0c;内置的基础技能并不能完全满足我的个性化需求。比如我需要定期…...

编程新知 2026/3/27 8:36:35

深入TC397与TLF35584的SPI通信：从寄存器操作到汽车ECU低功耗状态管理实战

深入TC397与TLF35584的SPI通信&#xff1a;从寄存器操作到汽车ECU低功耗状态管理实战 在汽车电子领域&#xff0c;电源管理芯片的选择与配置直接关系到整车电子控制单元&#xff08;ECU&#xff09;的可靠性与能耗表现。英飞凌的TLF35584作为一款高集成度电源管理IC&#xff0c…...

编程新知 2026/3/27 8:24:31

避开这5个坑！VS2019+Doxygen注释实战：从代码规范到HTML文档生成

VS2019Doxygen注释实战&#xff1a;5个典型陷阱与高效解决方案 在C项目开发中&#xff0c;良好的代码文档是团队协作的基石。Visual Studio 2019与Doxygen的组合为开发者提供了强大的自动化文档生成能力&#xff0c;但许多团队在实际应用中常陷入一些看似简单却影响深远的陷阱。…...

编程新知 2026/3/27 6:49:22

Qwen3.5-4B-Claude-Opus推理模型实战：系统提示词工程最佳实践

Qwen3.5-4B-Claude-Opus推理模型实战&#xff1a;系统提示词工程最佳实践 1. 模型概述与核心能力 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B的推理蒸馏模型&#xff0c;特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。这个版…...

编程新知 2026/3/27 6:11:02

s2-pro效果展示：会议纪要转语音+重点语句强调式播报实录

s2-pro效果展示&#xff1a;会议纪要转语音重点语句强调式播报实录 1. 专业语音合成新体验 s2-pro作为Fish Audio开源的专业级语音合成模型镜像&#xff0c;正在重新定义文本转语音的标准。不同于常见的聊天式语音工具&#xff0c;它专注于提供高质量的语音合成服务&#xff…...

编程新知 2026/3/27 6:01:01

如何高效访问优质内容？bypass-paywalls-chrome-clean工具全方位使用指南

如何高效访问优质内容&#xff1f;bypass-paywalls-chrome-clean工具全方位使用指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;大量优质内容被…...

编程新知 2026/3/27 5:44:58

告别卡顿闪烁！在Cesium 1.134中集成SOG格式，让400万高斯秒级加载

突破性能瓶颈&#xff1a;Cesium 1.134集成SOG格式实现400万高斯秒级渲染 在三维地理空间可视化领域&#xff0c;Cesium一直是开发者构建高精度场景的首选引擎。但当项目涉及数百万级高斯泼溅数据时&#xff0c;传统加载方式往往导致令人崩溃的卡顿和视角移动时的闪烁问题。最近…...

编程新知 2026/3/27 5:40:55

双模型对比：OpenClaw同时接入nanobot与云端API的性能测试

双模型对比&#xff1a;OpenClaw同时接入nanobot与云端API的性能测试 1. 测试背景与目标 最近在尝试用OpenClaw搭建一个能同时处理本地轻量任务和复杂云端任务的智能助手系统。核心需求是&#xff1a;日常简单查询走本地部署的轻量模型&#xff08;nanobot&#xff09;&#…...

编程新知 2026/3/27 5:04:29

OpenClaw跨平台实战：Windows到Mac的Qwen3-32B配置迁移

OpenClaw跨平台实战&#xff1a;Windows到Mac的Qwen3-32B配置迁移 1. 为什么需要跨平台配置迁移&#xff1f; 去年冬天&#xff0c;我在Windows工作站上搭建了一套基于Qwen3-32B的OpenClaw自动化系统&#xff0c;用于处理日常的文档整理和数据分析任务。当公司配发新款MacBoo…...

编程新知 2026/3/27 4:25:50

别再只盯着GPS了！从手机导航到无人机测绘，聊聊SPP、DGPS、RTK、PPP这几种定位技术到底该怎么选？

定位技术实战指南&#xff1a;从厘米级精度到全球覆盖的智能决策 站在一片待测绘的工地上&#xff0c;无人机工程师小王正面临一个关键抉择——该为这批新设备配置哪种定位模块&#xff1f;RTK的厘米级精度令人心动&#xff0c;但架设基准站的成本让他犹豫&#xff1b;PPP技术号…...

编程新知 2026/3/27 4:19:49