CSS中的margin与padding

目录

 一、margin

1.概念及作用

2.基本语法

3.margin的用法

二、padding

1.介绍

2.基本语法及要求

3. 用法

4.内边距和元素宽度


讲这些之前,先看一张图,便于理解

 一、margin

1.概念及作用

CSS margin 属性用于在任何定义的边框之外,为元素周围创建空间。

通过 CSS,您可以完全控制外边距。有一些属性可用于设置元素每侧(上、右、下和左)的外边距。

2.基本语法

CSS 拥有用于为元素的每一侧指定外边距的属性:

margin-top

margin-right

margin-bottom

margin-left

所有外边距属性都可以设置以下值:

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

提示:允许负值

3.margin的用法

为了缩减代码,可以在一个属性中指定所有外边距属性。

margin 属性是以下各外边距属性的简写属性:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

工作原理是这样的:

① 如果 margin 属性有四个值:

margin: 25px 50px 75px 100px;
  • 上外边距是 25px
  • 右外边距是 50px
  • 下外边距是 75px
  • 左外边距是 100px

 ② 如果 margin 属性设置三个值:

margin: 25px 50px 75px;

  • 上外边距是 25px
  • 右和左外边距是 50px
  • 下外边距是 75px 

③ 如果 margin 属性设置两个值:

  • margin: 25px 50px;
    • 上和下外边距是 25px
    • 右和左外边距是 50px

 ④ 如果 margin 属性设置了一个值:

margin: 25px;
  • 所有四个外边距都是 25px

⑤  auto

可以将 margin 属性设置为 auto,以使元素在其容器中水平居中。

然后,该元素将占据指定的宽度,并且剩余空间将在左右边界之间平均分配。

inherit

可以使子元素的margin属性继承父元素的margin属性。

二、padding

1.介绍

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS,您可以完全控制内边距(填充)。有一些属性可以为元素的每一侧(上、右、下和左侧)设置内边距。

2.基本语法及要求

CSS 拥有用于为元素的每一侧指定内边距的属性:

padding-top

padding-right

padding-bottom

padding-left

所有内边距属性都可以设置以下值:

  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距

提示:不允许负值

3. 用法

为了缩减代码,可以在一个属性中指定所有内边距属性。

padding 属性是以下各内边距属性的简写属性:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

工作原理是这样的:

① 如果 padding 属性有四个值:

padding: 25px 50px 75px 100px;
  • 上内边距是 25px
  • 右内边距是 50px
  • 下内边距是 75px
  • 左内边距是 100px

 ② 如果 padding 属性设置了三个值:

padding: 25px 50px 75px;
  • 上内边距是 25px
  • 右和左内边距是 50px
  • 下内边距是 75px

③ 如果 padding 属性设置了两个值:

padding: 25px 50px;
  • 上和下内边距是 25px
  • 右和左内边距是 50px

④ 如果 padding 属性设置了一个值:

padding: 25px;
  • 所有四个内边距都是 25px

4.内边距和元素宽度

CSS width 属性指定元素内容区域的宽度。内容区域是元素(盒模型)的内边距、边框和外边距内的部分。

盒子模型是指:外边距(margin)+ border(边框) + 内边距(padding)+ content(内容)

因此,如果元素拥有指定的宽度,则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

例如:

div {width: 300px;padding: 25px;
}

在这里,<div> 元素的宽度为 300px。但是,<div> 元素的实际宽度将是 350px(300px + 左内边距 25px + 右内边距 25px)

box-sizing:border-box属性,padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里

若要将宽度保持为 300px,无论填充量如何,那么可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距,则可用的内容空间会减少。

div {width: 300px;padding: 25px;box-sizing: border-box;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60465.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网深科技与中科方德完成兼容性认证

网深科技的产品NetInside可观测性分析平台与国产中科方德主流操作系统完成兼容性适配&#xff0c;系统名称&#xff1a;方德高可信服务器操作系统V4.0&#xff0c;系统运行稳定&#xff0c;性能卓越&#xff0c;完美兼容&#xff0c;能够为广大用户提供灵活、专业、直观可视性&…

docker 安装 Nginx

1、下载 docker pull nginx:latest 2、本地创建管理目录 mkdir -p /var/docker/nginx/conf mkdir -p /var/docker/nginx/log mkdir -p /var/docker/nginx/html 3、将容器中的相应文件复制到管理目录中 /usr/docker/nginx docker run --name nginx -p 80:80 -d nginxdocke…

tensorrtx部署yolov5 6.0

文章目录 一. yolov5 v6.0训练模型二.训练好的yolov5模型转tensorrt引擎 一. yolov5 v6.0训练模型 官网下载yolov5 v6.0代码 下载官方预训练好的模型 安装yolov5所需要的库文件&#xff0c;requirements.txt在下载好的yolov5源代码中有 pip install -r C:\Users\10001540…

Verilog 学习路线

参考知乎 首先得学习数电和 Verilog 基础。 常问的 Verilog 基础 二分频是怎么写的 阻塞和非阻塞及其应用 写一个100MHz的时钟 Reg 和 wire 的区别 Logic 和 wire 的区别&#xff0c;两者可以转换吗 用你最擅长的语言找出1-100的质数 一个最简单的八位加法器应该怎么验…

论文笔记:基于概念漂移的在线类非平衡学习系统研究

0 摘要 论文&#xff1a;A Systematic Study of Online Class Imbalance Learning With Concept Drift 发表&#xff1a;2018年发表在TNNLS上 源代码&#xff1a;&#xff1f; 作为一个新兴的研究课题&#xff0c;在线类非平衡学习往往结合了类非平衡和概念漂移的挑战。它处理…

C++中使用 if…else 有条件地执行多条语句

C中使用 if…else 有条件地执行多条语句 如果要在满足&#xff08;或不满足&#xff09;条件时执行多条语句&#xff0c;需要将它们组合成一个语句块。包含在大括号&#xff08;{}&#xff09;内的多条语句被视为语句块&#xff0c;例如&#xff1a; if (condition) {// cond…

C语言每日一练------------Day(7)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;两个数组的交集     双指针 &#x1f493;博主csdn个人主页&#xf…

Java自定义捕获异常

需求分析 ElectricalCustomerVO electricalCustomerVO new ElectricalCustomerVO(); electricalCustomerVO.setElcNumber(chatRecordsLog.getDeviceNumber()); List<ElectricalCustomerVO> electricalCustomerlist electricalCustomerMapper.selectElectricalCustomer…

Hadoop

阅读前请看一下&#xff1a;我是一个热衷于记录的人&#xff0c;每次写博客会反复研读&#xff0c;尽量不断提升博客质量。文章设置为仅粉丝可见&#xff0c;是因为写博客确实花了不少精力。希望互相进步谢谢&#xff01;&#xff01; 文章目录 阅读前请看一下&#xff1a;我是…

【pyqt5界面化工具开发-13】QtDesigner功能择优使用

目录 0x00 前言&#xff1a; 一、完成基本的布局 二、其他功能的使用 三、在代码行开发 0x00 前言&#xff1a; QtDesigner工具的择优使用&#xff1a; 1、他的界面开发&#xff0c;是我们主要需要使用的功能 2、他的其他功能的使用&#xff0c;有需要就可使用&#xff…

Redis持久化——RDF与AOF两种方式怎么做?有什么区别?

目录 1. 什么是RDB 2. save 和 bgsave 命令主动保存数据 2.1 save 2.2 bgsave 3. Redis 内部自动RDB机制 4. RDB 底层是如何实现 bgsave 的&#xff1f; 5. RDB 的缺点 6. 什么是AOF&#xff1f; 7. AOF文件的缺点&#xff1f; 8. AOF 重写文件配置 9. RDB 与 AOF …

docker启动paddlespeech服务,并使用接口调用

一、检查docker容器是否启动 1.输入命令 systemctl status docker 启动 systemctl start docker 守护进程重启 sudo systemctl daemon-reload 重启docker服务 systemctl restart docker 重启docker服务 sudo service docker restart 关闭docker service docker…

cvat 安装部署

官网地址&#xff1a; https://github.com/opencv/cvat/tree/masterhttps://github.com/opencv/cvat/tree/master 1.从官网上下载源码地址。 2.配置环境变量 vim /etc/profile source /etc/profile 或者执行&#xff1a; export CVAT_HOSTyour-ip-address 3.执行命令 …

Sql 函数传递参数 字符串拼接

使用场景 一个计算价格的函数&#xff0c;多个存储过程调用&#xff0c;因业务需求经常要新增参数&#xff0c;避免修改函数时程序执行存储过程报错&#xff0c;将多个参数拼接为一个字符串传递 -- 调用函数CalcuPrice(UnitPrice,CONCAT(MFQZC,MFQZC,&ItemNum,ItemNum,&am…

2023年天府杯——C 题:码头停靠问题

问题背景&#xff1a; 某个港口有多个不同类型的码头&#xff0c;可以停靠不同种类的船只。每 艘船只需要一定的时间来完成装卸货物等任务&#xff0c;并且每个码头有容量 限制和停靠时间限制。港口需要在保证收益的情况下&#xff0c;尽可能地提高 运营效率和降低成本。同…

【大虾送书第七期】深入浅出SSD:固态存储核心技术、原理与实战

目录 ✨写在前面 ✨内容简介 ✨作者简介 ✨名人推荐 ✨文末福利 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&#xff1a;免费送书活动专栏地址 写在前面 近年来国家大力支持半导体行业&#xff0c;鼓励自主创新&#xff0c;中国SSD技术和产业…

C++信息学奥赛1178:成绩排序

#include<bits/stdc.h> using namespace std; int main(){int n;cin>>n; // 输入整数 n&#xff0c;表示数组的大小int arr[n]; // 创建大小为 n 的整型数组 arrstring brr[n]; // 创建大小为 n 的字符串数组 brrfor(int i0;i<n;i) cin>>brr[i]>>ar…

Greenplum-segment镜像分布策略

Greenplum作为一款基于PostgreSQL的OLAP分布式MPP架构&#xff0c;其内部的角色可以通过配置冗余来保证高可用性&#xff0c;无论是管理节点还是计算节点。管理节点可以为Master配置一个Standby来保证高可用&#xff0c;而计算节点则可以为每个Primary segment配置一个对应的Mi…

Linux常用命令(不定期更新)

记录一下自己工作中常用的linux命令 查询类 top 实时查看进程 free -h 查看内存 df -h 查看已挂在的存储 fdisk -l 查看所有存储&#xff0c;包含未挂载 编辑类 passwd 修改密码&#xff0c;要进入到系统

update-alternatives详解

1.功能作用 update-alternatives是dpkg的实用工具&#xff0c;用来维护系统命令的符号链接&#xff0c;以决定系统默认使用什么命令。 在Debian系统中&#xff0c;我们可能会同时安装有很多功能类似的程序和可选配置&#xff0c;如Web浏览器程序(firefox&#xff0c;konquero…