CSS中padding的特殊性

原创 2016年08月30日 23:24:21
       通常我们都知道设置padding值会改变盒子的大小,现在就来说说,在什么情况下,设置padding不会改变盒子的大小。

       当一个大盒子包含一个小盒子,并且大小盒子都是块级元素,而且小盒子的宽度是继承大盒子的话,那么设置小盒子的padding-left不会改变小盒子的大小。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            width: 250px;
            height: 250px;
            background: red;
        }
        .two {
            height: 200px;
            background: green;
            padding-left: 20px;
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two"></div>
</div>
</body>
</html>

运行后可以发现小盒子的大小没有改变,改变的仅仅是内容区域减少了20px。


版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS深入理解之padding

CSS深入理解之padding
  • cc18868876837
  • cc18868876837
  • 2016年11月14日 09:38
  • 376

inline行内元素与padding margin 的断舍离

inline 行内元素 padding margin -top bottom line-height
  • qq_35809245
  • qq_35809245
  • 2016年12月14日 16:10
  • 1148

CSS利用padding和margin正负相消实现多列等高

原文链接:http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html CSS布局奇淫技巧之-多列等高 什么是等高布局? 先来看一个案例...
  • u010874036
  • u010874036
  • 2016年04月06日 21:13
  • 2037

前端开发中padding与边框是否包含进height和width的情况

在网页排版时经常会遇到padding或边框有时会包含在height或width里有时又不包含的情况。那么什么时候会包含,什么时候又不包含呢? 首先,任何情况下margin都不包含在height和wid...
  • hepcwl
  • hepcwl
  • 2015年03月05日 10:55
  • 6037

Margin和Padding值设置成百分数的布局

Margin和Padding是我们在网页设计经常使用到的CSS样式,他们分别是间距和填充,一个作用于盒子外面,一个作用于盒子里面,默认的情况下,这些属性的值都会被计算在盒子的面积里面,在网页开发中的流...
  • qq_34960569
  • qq_34960569
  • 2016年05月25日 14:10
  • 2595

padding——图片文字的自适应布局

图片宽度固定,文字宽度的自适应布局padding在子元素上HTML 如textarea标签中,Webkit内核的浏览器会默认resize的值为both,即用户可以调...
  • depers15
  • depers15
  • 2016年08月24日 19:36
  • 548

CSS深入之其实你可能根本不认识margin和padding(一)

1.我们来解析官方的margin是怎么个说法margin属性可以为给定元素设置所有四个(上下左右)方向的外边距属性。四个外边距属性设置分别是: margin-top, margin-right, ma...
  • qq_18661257
  • qq_18661257
  • 2017年04月17日 08:55
  • 849

为什么要在css文件中定义 ul{margin:0;padding:0;}这个选择器?

为什么要在css文件中定义 ul{margin:0;padding:0;}这个选择器?ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。请看以下不同浏览中对padding...
  • itpinpai
  • itpinpai
  • 2016年03月15日 17:15
  • 4690

css-内联(行内)元素、块元素、margin、padding

block元素的特点: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度。, , , , 和 是块元素的例子。 inli...
  • yixiu868
  • yixiu868
  • 2014年11月19日 12:47
  • 1154

css中基础padding的小技巧,移动端大用处

未经允许,不得转载!! 说的不全不周之处,欢迎指正、交流!! padding内边距,属性有:auto、%、数值px以及inherit(inherit在任何IE下不兼容); padding包括pad...
  • ime33
  • ime33
  • 2017年01月12日 18:20
  • 981
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中padding的特殊性
举报原因:
原因补充:

(最多只允许输入30个字)