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

class中 padding和margin的用法；

news 2026/1/31 21:19:41

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

相关文章：

class中 padding和margin的用法；

单独使用YOLOV9的backbone网络

WordPress JS Support Ticket插件 RCE漏洞复现

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

spring高级篇（一）

免费的GPT-3.5 API服务aurora

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

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

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

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

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

JVM复习

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

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

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

Web---robots协议详解

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

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

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

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

label-studio的使用教程(导入本地路径)

Appium+python自动化（十六）- ADB命令

Mac软件卸载指南，简单易懂！

html-＜abbr＞缩写或首字母缩略词

A2A JS SDK 完整教程：快速入门指南

vulnyx Blogger writeup

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

Golang——6、指针和结构体

Matlab实现任意伪彩色图像可视化显示

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)