【margin和padding的区别】
margin和padding的区别
margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)
padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)
1、语法结构
(1)padding-left:10px; /margin-left:10px; 左内/外边距
(2)padding-right:10px; /margin-right:10px; 右内/外边距
(3)padding-top:10px; /margin-top:10px; 上内/外边距
(4)padding-bottom:10px; /margin-bottom:10px; 下内/外边距
(5)padding:10px;/ margin:10px; 四边统一内/外边距
(6)padding:10px 20px; /margin:10px 20px; 上下、左右内/外边距
(7)padding:10px 20px 30px;/margin:10px 20px 30px; 上、左右、下内/外边距
(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左内/外边距
关于padding:
注意:将Padding设置为负值无效:
在块元素中:
因此,padding在块级元素下,上下左右可以随意设定,会对元素内部发生改变。
在内联元素中:
行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他
行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值,行内元素的padding元素,只有padding-
left和padding-right有效果,上下不识别;
关于margin:
margin:0 auto; 只对块级元素起作用
在块元素中:
因此,margin在块级元素下,上下左右可以随意设定。且块级元素的margin的参照基准是前一个元素即相对于自身之前的
元素有margin距离。如果元素是第一个元素,则就是相对于父元素的margin距离。
在内联元素中:
margin-top和margin-bottom对内联元素(对行)的高度没有影响,如果你要改变内联元素的行高即类似文本的行间距,那
么你只能使用这三个属性:line-height,fong-size,vertical-align。请记住,这个影响内联元素高度的是line-height而不是height。
转载于:https://www.cnblogs.com/zxnn/p/8186225.html
【margin和padding的区别】相关推荐
- CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
- margin和padding的区别和用法
margin和padding的区别和用法 什么是margin.padding? marigin:就是外边距.padding:就是内边距.怎么就容易记住两者呢? 马蓉大家都知道吧,给王宝强带帽子的那位, ...
- gap,margin和padding的区别
gap,margin和padding的区别 gap和padding都是css中的样式,在bootstrap中的p-5和g-4指的分别是对padding设置和gap的设置 gap gap针对的是grid ...
- Android布局中margin与padding的区别
我们知道Android开发不仅仅有代码的动态控制,而且还涉及到布局的静态搭建(xml).几乎在每一个xml文件中,我们总会看到margin和padding这两个属性,今天让我们初步探究一下它们之间的区 ...
- CSS样式表margin和padding的区别
用css时,首先要做的是把所有的标签margin和padding都清空.这样更容易控制浏览器的布局和兼容浏览器. 清空方法:*{margin:0; padding:0;} *是通配 ...
- CSS中:margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
- margin与padding的区别
margin,是其容器与其父容器的距离,也可以是同级元素的距离,也叫外边距.打个比喻,父容器是一间教室,子容器是教室里的座椅,通过margin改变座椅相对于教室的距离.也可以改变自己相对于其他座椅的距 ...
- Java前端(CSS)关于margin和padding的区别
首先,知道这两个单词的汉语翻译,有助于我们理解. margin: n.页边的空白:栏外:边缘:余裕:保证金:利润 vt.加边:记在页边:加上保证金 语法结构:(padding也相同) margin包括 ...
- margin和padding的区别
https://www.cnblogs.com/zxnn/p/8186225.html
最新文章
- Servlet学习笔记(三)之HttpServletRequest
- java将json转为hashmap_将JSON字符串转换为HashMap
- 第一个Django应用程序_part1
- laravel mysql驱动_Laravel 如何同时使用不同数据库驱动
- txt文本变为粗体_如何在PHP中使文本变为粗体?
- 深入实践Spring Boot2.4.3 节点实体持久化
- Linux环境下编写C程序
- VMware 虚拟机安装 android-x86_64 iso镜像
- PySpark : Structured Streaming
- 速读训练软件和速读资料
- 全国短消息服务中心号码
- VLAN划分-思科模拟器-基础回顾
- Go: 内置net/http库解析
- 软件测试多长时间可以学习,软件测试学习多长时间啊?好学吗?
- 基于testNG的数据驱动测试的自动化测试实践(一)
- 前端300道常见面试题,前端找工作必备
- 计算机组成与设计project1,计算机组成与体系结构(性能设计)答案完整版-第八版...
- java 中0x的数值表示方式 本质上是什么意思?
- R语言升级版本和迁移老版本中的包到新版本上的一些问题
- python录音pyaudio_用PyAudio录制特定时间的音频?
热门文章
- Lync Server 2010迁移至Lync Server 2013部署系列21:Lync 2013边缘第二台服务器配置
- java_ant详解
- Ubuntu 下获得root权限
- 构建Dubbo-2.0.7源码
- Dependency injection in ASP.NET Core
- 使用vue.js路由踩到的一个坑Unknown custom element
- Unity面试题汇总(第一部分)
- js事件循环 microtask macrotask
- Linux QtCreator 设置mingw编译器生成windows程序
- 【转】【CUBE】Oracle分组函数之CUBE魅力