margin

是设置两个标签的间隔，也就是距离；

padding

这个是比如一个p标签，它是100px*100px,我们使用的时候p标签的文字是贴着p标签的最左侧的，想要它的文字距离边界远一点，好看一点，就是需要做一个样式的调整，我们可以用到padding这个属性，加入说设置是10px，就是说这个p标签的大小依然是100px*100px，但是它的内容是变成了90px*90px；

border

boarder是设置边框的意思，他和padding的区别在于，padding是在标签边缘往里缩减，而border是在标签的边缘往外扩展，也就是说是一个100px*100px的标签，我设置他的border为20px，我们就可以看到整个标签的大小是变成了120px*120px，也就是说多出来了20px，其标签的内容也还是100px*100px的

margin、padding、border区分的更多相关文章

  1. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  2. margin padding border

    Difference between margin and padding? Remember these 3 points: The Margin is the extra space around ...

  3. css样式margin padding border

  4. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  5. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  6. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  7. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  8. css的padding,border,margin的意思

    下面的内边距(padding).边框(border) .外边距(margin)的意思是我自己的理解. 代码如下: <!DOCTYPE html> <html lang="e ...

  9. 盒模型大小取决于它的padding，margin，border数值

    盒模型规定了元素框处理元素内容width与height值.内边距padding.边框border 和 外边距margin 的数值大小.边框内的空白是内边距padding,边框外的空白是外边距margi ...

  10. padding/border与width的关系

    本文讲述 padding / border 的设置后是否对 width 有影响,width 等于 auto 与 100% 的区别 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边 ...

随机推荐

  1. [资料] Ceph存储系统，关于Redhat和Suse企业版存储知识汇总

    版权声明:很多其它内容,请关注[架构师技术联盟]公众号 https://blog.csdn.net/BtB5e6Nsu1g511Eg5XEg/article/details/81117091 wx_f ...

  2. Scala数据类型的继承结构

    Scala中,所有的值都是类对象,而所有的类,包括值类型,都最终继承自一个统一的根类型Any.统一类型,是Scala的又一大特点.更特别的是,Scala中还定义了几个底层类(Bottom Class) ...

  3. [django]restfulapi请求规范

    http://www.ruanyifeng.com/blog/2014/05/restful_api.html 方法及作用: GET(SELECT) :从服务器取出资源(一项或多项). POST(CR ...

  4. [LeetCode] 840. Magic Squares In Grid_Easy

    A 3 x 3 magic square is a 3 x 3 grid filled with distinct numbers from 1 to 9 such that each row, co ...

  5. 左右两栏div布局，高度自适应

    页面结构如下: <div class="container"> <div class="left"> left </div> ...

  6. 邮件收取客户端LumiSoft类库接收yahoo邮件的问题。

    //开始循环取邮件数据 m_pImap.Fetch( false, IMAP_t_SeqSet.Parse("1:*"), new IMAP_t_Fetch_i[]{ new IM ...

  7. [xdoj]1303jlz的刷题黑科技

    先分析复杂度,给的数据是1e5的,那么我们至少需要一个nlogn的算法才可以.由于答案是一个数字,首先想到是二分法(一般答案是一个数字都可以通过二分法来完成) 下面是思路: 1.可以完成题目的条件是, ...

  8. python datatype

    解释性语言,有类型的概念,没有类型的实体 所以,类型很重要 今天,我在这里练练python的类型 //test.py print int("10", 8) #8 scaleprin ...

  9. 编写带有下列声明的例程：第一个例程是个驱动程序，它调用第二个例程并显示String str中的字符的所有排列。例如，str是"abc"， 那么输出的串则是abc，acb，bac，bca，cab，cba，第二个例程使用递归。

    全排列在笔试面试中很热门,因为它难度适中,既可以考察递归实现,又能进一步考察非递归的实现,便于区分出考生的水平.所以在百度和迅雷的校园招聘以及程序员和软件设计师的考试中都考到了,因此本文对全排列作下总 ...

  10. jq文件上传及下载

    一.使用jquery.form.js上传文件 jquery.form.js获取地址:https://pan.baidu.com/s/1nSdfkCt25Rc5cHMFJRVcUQ 提取码: sbmt ...