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

class中 padding和margin的用法；

news 2026/3/27 11:11:35

如果我们想要移动盒子等的位置 ，除了可以用相对定位和绝对定位还可以用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

GIL已死，GIL万岁？——2024大厂Python并发岗面试题库首发（含性能压测对比数据）

第一章&#xff1a;GIL已死&#xff0c;GIL万岁&#xff1f;——2024大厂Python并发岗面试题库首发&#xff08;含性能压测对比数据&#xff09;一道高频真题&#xff1a;为什么 asyncio.run() 启动的协程无法被 multiprocessing.Process 并发执行&#xff1f; 该问题直指 Pyth…...

编程新知 2026/3/27 10:29:44

从Siwave导入模型到Q3D仿真，如何避免‘幽灵’solder导致的网络报错？

从Siwave到Q3D的模型迁移&#xff1a;彻底解决"幽灵焊料"引发的网络冲突 当你在Ansys电子设计自动化工具链中切换工作环境时&#xff0c;是否遇到过这样的困扰&#xff1a;从Siwave精心准备的模型导入Q3D后&#xff0c;突然冒出各种莫名其妙的网络重叠报错&#xff…...

编程新知 2026/3/27 10:07:28

保姆级教程：在银河麒麟V10桌面版上，用Docker容器化部署SpringBoot + 达梦数据库应用

银河麒麟V10桌面版容器化实战&#xff1a;SpringBoot与达梦数据库的Docker化部署指南 在国产化技术栈日益成熟的今天&#xff0c;将传统应用迁移到容器化环境已成为提升部署效率和系统可移植性的关键路径。银河麒麟V10作为国产操作系统的代表&#xff0c;结合飞腾CPU的硬件生态…...

编程新知 2026/3/27 7:05:27

DeepSeek-OCR-2实战教程：OCR结果JSON Schema解析与结构化数据入库指南

DeepSeek-OCR-2实战教程&#xff1a;OCR结果JSON Schema解析与结构化数据入库指南 1. 项目简介 DeepSeek-OCR-2是基于深度学习的智能文档解析工具&#xff0c;专门针对结构化文档内容提取而设计。与传统的OCR工具只能提取纯文本不同&#xff0c;这个工具能够精准识别文档的排…...

编程新知 2026/3/27 6:23:06

Phi-4-Reasoning-Vision开源模型：Phi-4-reasoning-vision-15B双卡推理镜像详解

Phi-4-Reasoning-Vision开源模型&#xff1a;Phi-4-reasoning-vision-15B双卡推理镜像详解 1. 项目概述 Phi-4-Reasoning-Vision是基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具&#xff0c;专为双卡RTX 4090环境优化设计。这个工具严格遵循官方SYSTE…...

编程新知 2026/3/27 5:50:59

5步搞定OpenClaw+百川2-13B：WebUI v1.0镜像快速体验指南

5步搞定OpenClaw百川2-13B&#xff1a;WebUI v1.0镜像快速体验指南 1. 为什么选择这个组合&#xff1f; 上周我在测试本地AI自动化工具时&#xff0c;发现一个痛点&#xff1a;很多开源模型要么体积太大跑不动&#xff0c;要么功能太单一。直到在星图GPU平台看到百川2-13B-4b…...

编程新知 2026/3/27 5:22:45

tcc-g15: 开源散热管理工具实战指南

tcc-g15: 开源散热管理工具实战指南 【免费下载链接】tcc-g15 Thermal Control Center for Dell G15 - open source alternative to AWCC 项目地址: https://gitcode.com/gh_mirrors/tc/tcc-g15 Thermal Control Center&#xff08;tcc-g15&#xff09;是一款专为Dell G…...

编程新知 2026/3/27 3:35:08

MyBatis 中 CDATA 的实战应用与避坑指南

1. 为什么MyBatis需要CDATA 在MyBatis的日常开发中&#xff0c;我们经常需要在XML映射文件中编写SQL语句。但XML本身对特殊字符有着严格的限制&#xff0c;比如小于号(<)、大于号(>)、和号(&)等字符在XML中都有特殊含义。这就导致了一个很现实的问题&#xff1a;当我…...

编程新知 2026/3/27 3:13:02

AI 开发实战：给团队定一套能落地的 AI 使用规范

AI 开发实战&#xff1a;给团队定一套能落地的 AI 使用规范 一、为什么团队用了 AI 反而容易更乱&#xff1f; 因为每个人都在各自试&#xff1a; 有人用来写代码有人用来写文档有人用来查错有人输出直接复制上线 如果没有基本规范&#xff0c;效率可能提升了&#xff0c;但风险…...

编程新知 2026/3/27 2:12:41

基于FDM - EDFM的油气藏地层压力场计算：MATLAB实战

基于有限差分-嵌入式离散裂缝网络&#xff08;FDM-EDFM&#xff09;的油气藏地层压力场计算&#xff0c;通过matlab代码实现&#xff0c;可提供理论指导和相关问题&#xff0c;可计算不同裂缝网络的压力分布。在油气藏工程领域&#xff0c;准确计算地层压力场对于理解油藏动态、…...

编程新知 2026/3/27 2:10:41