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:值 。但是这个样子写的话都把所有的值都设置了还能让其他的值都单个的写吗?方法是有的:

  1. margin/padding:值1 值2 值3 值4   //设置元素上右下左的内/外边距
  2. marign/padding:值1 值2      //设置元素上下、 左右的内/外边距
  3. 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

时间: 2024-10-13 20:11:10

margin和padding的区别和用法的相关文章

CSS中margin和padding的区别

本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距. 在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法 一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)pad

CSS样式表margin和padding的区别

  用css时,首先要做的是把所有的标签margin和padding都清空.这样更容易控制浏览器的布局和兼容浏览器. 清空方法:*{margin:0; padding:0;}         *是通配符,表示所有标签元素. 常见:{margin:0 auto}(参考例子 2,上下边界为0,左右则根据宽度自适应相等的值(居中))

CSS属性margin、padding的区别

原始状态 不设置margin和padding的状态 margin 设置外边距之后的状态 padding 设置内边距之后的状态 ,注意是撑开,外框高宽由300px变成450px. 原文地址:https://www.cnblogs.com/shenyf/p/8439685.html

margin和padding的区别

目前web2.0已经越来被人们认可,因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准,其中很重要的一条就是新的布局规则,div+css.以前基本上是用table布局的,这种传统的方式简单直观,但是这新的标准我学习起来时常找不到北.呵呵,就拿今天这个例子来说吧,很多朋友肯定也有我这种情况的,那我就从网上搜集一些例子出来,让个更多的人消除这种烦恼. 事例一: css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 也就是说 设置m

android布局中margin和padding的区别!

其实从使用的时候就可以区别开来. android:padding android:layout_margin padding是在本控件级别的,而margin是在layout级别的. 最好拿有背景的控件做测试: padding: margin:

HTML中margin和padding的区别

我们以DIV为一个盒子例子,既然和显示生活中的盒子一样,那我们想一下,生活中的盒子 内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫"content(内 容)",而盒子的纸壁给他起个名字叫"border(边框)",如果盒子内部的东西比如是一块硬 盘,但是硬盘怕震动,所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料,这时 硬盘和盒子的边框就有了一定的距离了,我们称这部分距离叫"padding(内边距)",如果 我们需要购买

margin 和 padding 的区别

通俗的讲法: padding:内边距,如果以border为界限的话,在border里. margin:外边距,在border外. 相同点:参数相同 (a,b,c,d)->(上,右,下,左) 举个例子,很容易看出: css样式: div{ width:100px; height:100px; border:2px solid blue; padding:10px 10px 10px 10px; margin:10px 10px 10px 10px; background-color:black;

margin和padding的用法与区别--以及bug处理方式

margin和padding的用法: (1)padding (margin) -left:10px; 左内 (外) 边距(2)padding (margin) -right:10px;   右内 (外) 边距(3)padding (margin) -top:10px; 上内 (外) 边距(4)padding (margin) -bottom:10px;  下内 (外) 边距(5)padding (margin) :10px;    四边统一内  (外) 边距(6)padding (margin)

css中margin和padding的用法区别

谈到css中的margin和padding这两个我们几乎每个页面都会用到的属性,我们有必要先来了解一下margin和padding 1.什么是margin和padding 谈到margin和padding我们就有必要了解一下css盒模型 (Box Model) 根据上面的这张图我们可以很清晰的看到,margin用来设置外边距,padding用来设置内边距 啥是外边距和内边距,我们看下w3c上面的官方说明: css外边距: 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”.