padding是盒子内容与边框的距离。

padding:10px;/*上下左右都是10px*/

padding:10px 20px;/*上下是10px 左右是20px*/

padding:10px 20px 30px 40px;/*依次是上下左右*/

注释：在盒子加上padding之后，例如padding:10px，会造成盒子宽高实际上都增加了10px。

嵌套中的盒子也就是子盒子，如果继承了父盒子的宽，那么不管子盒子如何增加padding-left、padding-right的值都不会撑大自己的宽，高是可以被撑大的。如果子盒子并没有继承父盒子的宽，而是自己设定了一个值，那么随着padding值的增大，它也会不断的增加。下面是继承了父盒子的宽：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .father {

            width: 500px;

            height: 300px;

            background-color:#b6ff00;

        }

        .son {

            height: 100px;

            background-color: red;

            padding-left:20px;

            padding-right: 20px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

</html>

效果：

结果：并没有撑大它的宽。

CSS——padding的更多相关文章

  1. CSS padding margin border属性详解

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

  2. CSS Padding（填充）

    CSS Padding(填充)属性定义元素边框与元素内容之间的空间. Padding(填充) 当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜 ...

  3. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...

  4. 转-CSS padding margin border属性详解

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

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

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

  6. CSS padding

    CSS padding 是用来控制div table 内间距的,下面我们就来讲一下padding 实例吧.   CSS padding 利用CSS填充,你将能够更改默认的间隙内出现的各种HTML元素( ...

  7. 图片框住一个小视频 谈css padding百分比自适应

    今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图. 如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最 ...

  8. CSS：CSS padding（填充）

    ylbtech-CSS:CSS padding(填充) 1.返回顶部 1. CSS padding(填充) CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的 ...

  9. css padding 填充

    语法: padding:[ <length> | <percentage> ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除 table-row-group | ta ...

  10. css padding在ie7、ie6、firefox中的兼容问题

    padding 简写属性在一个声明中设置所有内边距属性. 说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边 ...

随机推荐

  1. php获取代理服务器真实内网IP方法

     功能:获取用户真实IP地址,代理服务器内网IP,防HTTP_CDN_FORWARDED_FOR注入 function getIP() { if (isset($_SERVER["HTTP_ ...

  2. HDU——1787 GCD Again

    题意: 在一次acm竞赛之后,你花了一些时间去思考和尝试解决那些未解决的问题吗? 不知道?哦,当你想成为“大牛”的时候,你就必须这样做. 现在你会发现,这个问题是如此熟悉: 两个正整数a和b的最大GC ...

  3. Eclipse查看方法/类调用的方法

    1.(首推)双击选中该方法/类,[Ctrl]+[Alt]+[H](Open Call Hierarchy) 2.(次推)选中该方法/类,[Ctrl]+[Shift]+[G](References) 3 ...

  4. java ee开发常用类和接口

    1.javax.Validation接口,做mvc传入数据验证用 2.javax.servlet接口 3.javax.datasource接口 4.javax.session接口 5.javax.ht ...

  5. java String长度与varchar长度匹配理解（字符和字节长度理解）

    java String长度与varchar长度匹配理解(字符和字节长度理解) string中的length()长度,返回的是char的数量,每个char可以存储世界上任何类型的文字和字符,一个char ...

  6. 一起talk C栗子吧（第一百二十三回：C语言实例--显示变量和函数的地址）

    各位看官们,大家好,上一回中咱们说的是多线程的样例.这一回咱们说的样例是:显示变量和函数的地址. 闲话休提,言归正转.让我们一起talk C栗子吧! 在编敲代码时,有时候须要获取程序中变量和函数的地址 ...

  7. Live555研究之中的一个 源码编译

                                                Live555研究之中的一个 源代码编译 Live555 是一个为流媒体提供解决方式的跨平台的C++开源项目,它 ...

  8. Android开发之使用sqlite3工具操作数据库的两种方式

    使用 sqlite3 工具操作数据库的两种方式 请尊重他人的劳动成果,转载请注明出处:Android开发之使用sqlite3工具操作数据库的两种方式 http://blog.csdn.net/feng ...

  9. Ansi2Utf8 小工具

    将GB2312编码的文件转成Unity使用的UTF8无bom格式 主要用批处理执行 Ansi2Utf8.exe XXXXX.txt  源代码 using System; using System.Co ...

  10. km算法(二分图最大权匹配)学习

    啦啦啦! KM算法是通过给每个顶点一个标号(叫做顶标)来把求最大权匹配的问题转 化为求完备匹配的问题的.设顶点Xi的顶标为A[i],顶点Yi的顶标为B[i],顶点Xi与Yj之间的边权为w[i,j].在 ...