CSS内边距和外边距属性

外边距属性用margin;padding属性叫填充,或者也叫内边距;

margin:标签与标签的距离,到包围它的元素的边框的距离;

padding:内边距,用于控制内容与边框之间的距离;
CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距;

有2个div,
<div id="div1" style="width: 200px;height: 200px;border: 3px solid green;">
   <div id="div2" style="width: 100px;height: 100px;border: 3px solid green;">
   </div>
</div>

没有任何边距属性,显示如下;

里面的div定义了上下左右的外边距,

<div id="div1" style="width: 200px;height: 200px;border: 3px solid green;">
   <div id="div2" style="width: 100px;height: 100px;border: 3px solid green; margin : 30px 30px 30px 30px;">
   </div>
</div>

    显示如下;

 

里面的div里包含一段文字,

<div id="div1" style="width: 200px;height: 200px;border: 3px solid green;">

   <div id="div2" style="width: 100px;height: 100px;border: 3px solid green; margin : 30px 30px 30px 30px;">
AAABBBB
   </div>

</div>

 

里面的div定义padding属性,

<div id="div1" style="width: 200px;height: 200px;border: 3px solid green;">

   <div id="div2" style="width: 100px;height: 100px;border: 3px solid green; margin : 30px 30px 30px 30px;padding:30px 0px 0px 0px">
AAABBBB
   </div>

</div>

    定义上方padding为30px、其他padding为0,显示如下;

 

 定义了padding之后影响到了div2的大小;下回再研究;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div demo </title>
<style></style>
</head><body><div id="div1" style="width: 200px;height: 200px;border: 3px solid green;"><div id="div2" style="width: 100px;height: 100px;border: 3px solid green; margin : 30px 30px 30px 30px;padding:30px 0px 0px 0px">
AAABBBB</div>
</div></body>
</html>

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

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

相关文章

框架分析(5)-Django

框架分析&#xff08;5&#xff09;-Django 专栏介绍Django核心概念以及组件讲解模型&#xff08;Model&#xff09;视图&#xff08;View&#xff09;模板&#xff08;Template&#xff09;路由&#xff08;URLconf&#xff09;表单&#xff08;Form&#xff09;后台管理&…

Unable to Locate package python2| Linux Ubuntu系统下python2的安装

Linux Ubuntu系统下python2的安装 FSL的安装脚本是用Python2写的&#xff0c;新版本的Ubuntu &#xff08;16以后&#xff09;在默认情况下没有安装Python2。在终端输入 python2&#xff0c;若提示没有相应的命令&#xff0c;则需要先安装Python2&#xff0c;如下指令&#xf…

【30天熟悉Go语言】10 Go异常处理机制

作者&#xff1a;秃秃爱健身&#xff0c;多平台博客专家&#xff0c;某大厂后端开发&#xff0c;个人IP起于源码分析文章 &#x1f60b;。 源码系列专栏&#xff1a;Spring MVC源码系列、Spring Boot源码系列、SpringCloud源码系列&#xff08;含&#xff1a;Ribbon、Feign&…

java八股文面试[数据结构]——List和Set的区别

List和Set是用来存放集合的接口&#xff0c;并且二者都继承自接接口Collection List 中的元素存放是有序的&#xff0c;可以存放重复的元素&#xff0c;检索效率较高&#xff0c;插入删除效率较低。 Set 没有存放顺序不能存放重复元素检索效率较低&#xff0c;插入删除效率较…

【自动电压调节器】无功功率控制的终端电压控制研究(Simulink)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

[ VMware 虚拟机 ] 启动不了图形界面,报 “The system is running in low-graphics mode” 错误

文章目录 问题现象异常原因解决方案 问题现象 在启动虚拟机的时候&#xff0c;不能正常的进入图形界面&#xff0c;报 “The system is running in low-graphics mode” 错误。 异常原因 启动界面的xorg.conf文件失败并删除。 解决方案 1、点击异常界面上的 “ok”后&…

loss.sum.backward()为什么要sum()?

在动手学深度学习中&#xff0c;这样解释的&#xff1a; 当y不是标量时&#xff0c;向量y关于向量x的导数的最自然解释是一个矩阵。 对于高阶和高维的y和x&#xff0c;求导的结果可以是一个高阶张量。 然而&#xff0c;虽然这些更奇特的对象确实出现在高级机器学习中&#xff…

JetBrains 2023.2全新发布!IDEA、PyCharm等支持AI辅助

日前JetBrains官方正式宣布旗下IDE系列今年第二个重要版本——v2023.2全新发布&#xff0c;涵盖了 IntelliJ IDEA、PyCharm、WebStorm等一众知名产品&#xff0c;接下来我们一起详细了解一下他们的更新重点吧~ IntelliJ IDEA v2023.2——引入AI辅助开发 IntelliJ IDEA 2023.2…

vue关闭弹窗刷新父页面 this.$refs

代码截图 主页面 弹出框页面 接这一篇文章后续 参考链接

【javaweb】学习日记Day3 - Ajax 前后端分离开发 入门

目录 一、Ajax 1、简介 2、Axios &#xff08;没懂 暂留&#xff09; &#xff08;1&#xff09;请求方式别名 &#xff08;2&#xff09;发送get请求 &#xff08;3&#xff09;发送post请求 &#xff08;4&#xff09;案例 二、前端工程化 1、Vue项目-目录结构 2、…

拒绝摆烂!C语言练习打卡第六天

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;每日一练 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、选择题 &#x1f4dd;1.第一题 &#x1f4dd;2.第二题 &#x1f4d…

pgadmin4中的备份与恢复

一&#xff0c;postgresql 数据的备份与恢复 &#xff08;一&#xff09;数据库备份与恢复 1&#xff0c;备份 windows环境 1> dump 逻辑备份 1&#xff0c;用管理员身份打开power shell 2&#xff0c;切换到本机 postgresql 安装目录下的 bin 目录&#xff1a; PS C…

win开机自启jar包

下载winsw工具 只需下载图中红框的工具 https://github.com/winsw/winsw/releases 文件配置 将下载的文件与jar文件放置在一起&#xff0c;两个文件名修改为服务名 编辑xml文件 注意不要出现中文&#xff0c; 标签内的jar文件地址要改为自己目录 <service><!-- I…

MySQL每日一练--校园教务系统

一丶数据库名称&#xff1a;SchoolDB 二丶数据库表信息&#xff1a;角色信息表 表名&#xff1a; t_role 主键&#xff1a; r_id 序号 字段名称 字段说明 类别 位数 属性 备注 1 r_id 角色编号 int 主键 自动增长 2 r_name_EN 角色名&#xff08;英…

快速排序三种思路详解!

一、快速排序的介绍 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法&#xff0c;其基本思想为&#xff1a;任取待排序元素序列中 的某元素作为基准值&#xff0c;按照该排序码将待排序集合分割成两子序列&#xff0c;左子序列中所有元素均小于基准值&#xff0c;…

<C++>泛型编程-模板

1.泛型编程 如何实现一个通用的交换函数呢&#xff1f;可以使用函数重载 void Swap(int &left, int &right) {int temp left;left right;right temp; }void Swap(double &left, double &right) {double temp left;left right;right temp; }void Swap(c…

基于YOLOv8模型和DarkFace数据集的黑夜人脸检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型和DarkFace数据集的黑夜人脸检测系统可用于日常生活中检测与定位黑夜下的人脸&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目…

开源与专有软件:比较与对比

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

kafka--技术文档--基本docker中安装<单机>-linux

安装zookeeper 阿丹小科普&#xff1a; Kafka在0.11.0.0版本之后不再依赖Zookeeper&#xff0c;而是使用基于Raft协议的Kafka自身的仲裁机制来替代Zookeeper。具体来说&#xff0c;Kafka 2.8.0版本是第一个不需要Zookeeper就可以运行Kafka的版本&#xff0c;这被称为Kafka Raf…

Mysql索引+事务+存储引擎

一、索引 1.1 索引的概念 -索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址&#xff08;类似于c语言的链表通过指针指向数据记录的内存地址&#xff09; -使用索引后可以不用扫描全表来定位某行的数据&#xff0c;而是先通过索…