margin和padding的区别和用法
margin和padding的区别和用法
什么是margin、padding?
marigin:就是外边距。padding:就是内边距。怎么就容易记住两者呢?
马蓉大家都知道吧,给王宝强带帽子的那位,假如你认识了马蓉是不是想离他远点呢?而马蓉的拼音是marong,是不是和margin特别像呢?那么你看着maring是不是就知道了margin是外边距呢?
那么padding就更容易记住了,panda是熊猫大家都是知道吧,熊猫是我们中国的国宝而且都很可爱,所以看见padding就知道了是内边距是吧。
margin和padding的用法
margin-top | 设置元素的上外边距 |
padding-top | 设置元素的上内边距 |
margin-left | 设置元素的左外边距 |
padding-top | 设置元素的左内边距 |
margin-right | 设置元素的右外边距 |
padding-right | 设置元素的右内边距 |
margin-bottom | 设置元素的下外边距 |
padding-bottom | 设置元素的下内边距 |
除了这几种方法外还有其他的方法吗?
当然是有的,margin和padding都是简写属性他们可以直接在里面设置他们的属性。即:margin/padding:值 。但是这个样子写的话都把所有的值都设置了还能让其他的值都单个的写吗?方法是有的:
- margin/padding:值1 值2 值3 值4 //设置元素上右下左的内/外边距
- marign/padding:值1 值2 //设置元素上下、 左右的内/外边距
- marign/padding:值1 值2 值3 //设值元素上、左右、下的内外边距
当我写的margin/padding写的没毛病的时候他没有给我显示出来我想要的结果是什么情况?
这种情况出现的时候请你先检查你的代码是否有问题,若是代码没有问题的话就是出现了BUG。那么该如何解决的?
当你的margin出现问题的时候只要在父元素中加入overflew:hidden 就可以解决它的问题。但是当你的父元素出现溢出情况的时候就回隐藏。
当你的padding出现问题的时候只要在元素中加入box-sizing:border-box 就可以解决它的问题
当然还有其他的方法回去除bug的问题我在这里给写的是最简单的方法,不喜勿喷。谢谢
转载于:https://www.cnblogs.com/CcPz/p/8185489.html
margin和padding的区别和用法相关推荐
- CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
- 【margin和padding的区别】
margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.(外边距) 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
最新文章
- Android 自定义ProgressBar 实现进度圆环
- jQuery 学习笔记之九 (jQuery 图片提示 )
- 设计模式之动态代理的代码实现(Java)
- java 设计模式学习笔记十 bridge桥模式
- C++ 类的隐式转换
- Asp.net MVC模型数据验证扩展ValidationAttribute
- 样式表放在顶部的好处
- java版欧朋浏览器_Opera欧朋浏览器_Opera欧朋浏览器下载[2020官方最新版]Opera欧朋浏览器安全下载_
极速下载...
- RS232和RS485区别
- 游戏开发之C++类中的static、const梳理总结(C++基础)
- 华为联运游戏审核驳回:在未安装或需更新HMS Core的手机上,提示安装,点击取消后,游戏卡屏(集成的6.1.0.301版本游戏SDK)
- 设置浏览器谷歌/edge浏览器允许跨域
- flask debug模式logging模块报错os.rename(self.baseFilename, dfn) WindowsError: [Error 32]
- 小程序审核失败:你的小程序涉及提供播放、观看等服务,请补充选择:文娱-其他视频类目。怎么解决呢
- 权限管理框架实现(1)--Struts切面处理
- 32位的md5校验程序
- opencv-之图像细化(直线细化)
- 7-1 换硬币 (20 分)
- MySQL的定时任务EVENT事件使用说明
- 潮信服务器端保不保留客户信息,潮信app(潮信无痕聊天)V2.9.6 手机版