CSS内边距和外边距属性

news2024/9/24 3:28:11

外边距属性用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.coloradmin.cn/o/930971.html

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

相关文章

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】

&#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【三】的分享&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我…

【力扣每日一题】2023.8.26 汇总区间

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一个有序数组&#xff0c;让我们把数组内的元素汇总区间&#xff0c;也就是说有一串数字是连续的&#xff0c;比如是 1 2 3 4…

数据结构:线性表之-顺序表

目录 1.线性表概念 1.1 什么是顺序列表 1.2 线性表 2.顺序表实现 将有以下功能&#xff1a; 详细过程 顺序表的动态存储 顺序表初始化 尾插 扩容 头插 更改后的尾插 尾删 头删 打印 释放内存 优化顺序表 (任意位置插入删除) 优化后的头插尾插 优化后的头删尾…

npm常用命令 + 前端常用的包管理工具 以及 npm淘宝镜像配置等

npm常用命令 前端常用的包管理工具 以及 npm淘宝镜像配置等 1. 前言1.1 NodeJs的下载安装1.2 windows上1.3 常用包管理工具 2. npm2.1 npm 的安装2.2 npm初始化包2.3 npm 安装、卸载包2.3.1 非全局安装2.3.1.1 单个包的安装2.3.1.1.1 默认版本安装2.3.1.1.2 指定版本安装 2.3.…

Matlab图像处理运算方法-点运算

点运算 点运算又称为对比度增强、对比度拉伸或灰度变换&#xff0c;是一种通过图像中的每一个像素值&#xff08;即像素点上的灰度值&#xff09;进行运算的图像处理方式。它将输入图像映射为输出图像&#xff0c;输出图像每个像素点的灰度值仅由对应的输入像素点的灰度值决定…

(四)CUDA应用程序编程接口详解

C语言扩展 CUDA的编程接口是C语言的扩展集&#xff0c;其中主要的是Runtime库&#xff0c;该库分为三个组件&#xff1a;主机组件、设备组件以及公共组件 主机组件&#xff1a;在主机上运行并提供函数来控制和访问一个或多个计算设备 设备组件&#xff1a;设备运行并且提供特…

树莓派4B上安装Gitlab

参考连接&#xff1a; 树莓派上使用 GitLab 搭建专业 Git 服务 | 树莓派实验室 gitlab reconfigure 卡住 ruby_block[wait for redis service socket] action run_芹菜学长的博客-CSDN博客 以及用到了讯飞星火 系统版本信息 1.进入 giblab安装页面gitlab/gitlab-ce - Instal…

Python——提高数据处理效率的迫切需要

提高数据处理效率的迫切需要 本章包括 处理指数级增长的数据所面临的挑战 传统计算架构与最新计算架构的比较 Python在现代数据分析中的作用和不足 提供高效Python计算解决方案的技术 我们一直在以极快的速度从各种来源收集海量数据。无论目前是否有使用价值&#xff0c;…

YOLOv5算法改进(7)— 添加SimAM注意力机制

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。SimAM&#xff08;Similarity-based Attention Mechanism&#xff09;是一种基于相似度的注意力机制&#xff0c;它的原理是通过计算查询向量与每个键向量之间的相似度&#xff0c;从而确定每个键向量对于查询向量的重要性…

搭建开发环境-Mac

概述 上一篇搭建开发环境-WSLUbuntu 记录了WSL 和Ubuntu 下开发环境的搭建。这一篇就说下Mac开发环境的搭建。 就像很多人误以为Mini 是专为女孩子设计的高颜值车&#xff0c;其实是一辆极其hardcore 的拉力车一样。 很多人都被Mac 那高颜值蒙蔽了&#xff0c;其实这是一台生产…

为DOSBOX增加外部串口功能

如果DOSBOX内部串口与宿主机串口通互通&#xff0c;那DOSBOX中各种语言开发的程序均与外界有了串行通信功能&#xff0c;MODBUS with DOSBOX也就实现了。下面的操作&#xff0c;为DOSBOX打开通往外部的串行通信接口。 1. 在宿主机上创建虚拟串口对。方法是安装 Free 的 com0co…

【NLP的python库(01/4) 】: NLTK

一、说明 NLTK是一个复杂的库。自 2009 年以来不断发展&#xff0c;它支持所有经典的 NLP 任务&#xff0c;从标记化、词干提取、词性标记&#xff0c;包括语义索引和依赖关系解析。它还具有一组丰富的附加功能&#xff0c;例如内置语料库&#xff0c;NLP任务的不同模型以及与S…

【LeetCode75】第三十七题 二叉树中的最长交错路径

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给我们一棵二叉树&#xff0c;问我们在这棵树里能找到的最长交错路径。最长交错路径就是在二叉树里一左一右一左一右这样走&#xff0c;最…

Golang Gorm 高级查询之where + find

插入测试数据 package mainimport ("fmt""gorm.io/driver/mysql""gorm.io/gorm" )type Student struct {ID int64Name string gorm:"size:6"Age intEmail *string }func (*Student) TableName() string {return "student&q…

自动化测试概况和认知

前言 书中说测试架构师掌握自动化测试的目的不是设计自动化架构或是具体来部署自动化&#xff0c;而是用好自动化。其实这一点我觉得对涉及自动化测试的人员都是通用的&#xff0c;只是偏重点不同。 往往自动化测试前期投入成本可能会大一点&#xff0c;比如框架设计、技术选…

神经网络的工作原理

目录 神经网络的介绍 神经网络的组成 神经网络的工作原理 Numpy 实现神经元 Numpy 实现前向传播 Numpy 实现一个可学习的神经网络 神经网络的介绍 神经网络受人类大脑启发的算法。简单来说&#xff0c;当你睁开眼睛时&#xff0c;你看到的物体叫做数据&#xff0c;再由你…

【论文笔记】Planning and Decision-Making for Autonomous Vehicles

文章目录 Summary1. INTRODUCTION2. MOTION PLANNING AND CONTROL2.1. Vehicle Dynamics and Control2.2. Parallel Autonomy2.3. Motion Planning for Autonomous Vehicles 3. INTEGRATED PERCEPTION AND PLANNING3.1. From Classical Perception to Current Challenges in Ne…

一篇读懂辐射检测仪应用解决方案技术(附方案选型及原理分析)

关于常见的辐射检测仪应用方案&#xff1a; 辐射检测仪是用于测量环境中辐射水平的设备&#xff0c;常用于核电站、医疗机构、实验室和核辐射工作场所等地方。以下是一种可能的辐射检测仪应用方案&#xff1a; 实时监测&#xff1a;辐射检测仪可以实时监测环境中的辐射水平&am…

NIST测试包的可能问题

其实,大多数出现的问题,可能或多或少都可能跟数据集的大小相关。 如: Random Excursions Variant,在测试结果中,可能显示为横线,打开原始报告,可以看到: WARNING: TEST NOT APPLICABLE. THERE ARE AN INSUFFICIENT NUMBER INSUFFICIENT NUMBER OF C…

【C++ 学习 ⑰】- 继承(下)

目录 一、派生类的默认成员函数 二、继承与友元 三、继承与静态成员 四、复杂的菱形继承及菱形虚拟继承 五、继承和组合 一、派生类的默认成员函数 派生类的构造函数必须调用基类的构造函数初始化基类的那一部分成员。如果基类没有默认构造函数&#xff0c;那么必须在派生…