padding：内边距，所有浏览器都支持，不允许使用负值

　　　　继承内部格式生成了10px的边距。

属性：

　　auto：浏览器计算机内边距。

　　length：规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。

　　%:规定基于父元素的宽度的百分比的内边距。

　　inherit:规定应该从父元素继承内边距。

html代码

<body>

    <div style="width: 500px;height: 300px;border: solid 1px;background-color: #303a40">

        <div style="width: 200px;height: 200px;background-color: #4cae4c;padding: 10px;"></div>

    </div>

</body>

　　效果图：

内边距生效前：

       

marging:外边距

　　继承外部格式生成了10px边距

css代码

.cs1{

    width: 400px;

    height: 400px;

    border: solid 1px;

    background-color: yellow;

    position: relative;

    left:20px;

    top:20px;

}

.cs2{

    width: 100px;

    height: 100px;

    background-color: black;

    position: relative;

    left:20px;

    top:40px;

    margin:20px;

}

　　html代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="ctest.css">

</head>

<body>

    <div class="cs1">

        <div class="cs2"></div>

    </div>

</body>

</html>

　　效果图原来样式：                                                                      效果图：设置margin后

css之padding,marging的更多相关文章

  1. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  2. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

  3. css利用padding百分比实现图片自适应高度

    应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...

  4. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

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

  5. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

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

  6. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  7. css利用padding生成图标

    先插入HTML结构: <div class="line-three"></div> <div class="circle"> ...

  8. 图解CSS的padding,margin,border属性

    原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...

  9. CSS知识点-- Padding

    The CSS padding properties define the space between the element border and the element content. Padd ...

随机推荐

  1. Android 线程模型

    Android 线程模型 1. import android.os.Handler;  import android.os.Message; public class MainActivity ext ...

  2. 10、SQL基础整理（约束2）

    约束 除主键约束.外键约束外 唯一约束(主键列.索引列的候选索引)   设计---右键---索引/键---需要修改的列----是唯一的----忽略重复键 代码方式: cid  varchar (20) ...

  3. aspx页面图片用作html中img的url

    背景:如果无法直接访问保存图片的服务器,我们可以先制作一个aspx页面用来接受服务器发送过来的图片,然后html页面请求aspx页面.对图片服务器起一定的缓冲保护作用,预防对黑客攻击造成危害. 注意: ...

  4. C#使用Fixed创建固定大小的缓冲区

    在 C# 中,可以使用 fixed 语句在数据结构中创建带有固定大小数组的缓冲区. 使用现有代码(如使用其他语言.预先存在的 DLL 或 COM 项目编写的代码)时,这种方法非常有用. 固定数组可采用 ...

  5. HDU 5067

    http://acm.hdu.edu.cn/showproblem.php?pid=5067 规定起点和终点的tsp问题,解法依然是状态压缩dp,在初始化和计算答案的时候略做改动即可 #include ...

  6. echarts在360中以及IE8浏览器不兼容：解决方案

    参考:http://blog.csdn.net/www3300300/article/details/12992489 添加: <head> <meta http-equiv=&qu ...

  7. 转:去掉DataTable重复数据（程序示例比较）

    using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.T ...

  8. 计算机硕士工资一览表 08年最新各大IT公司薪水行

    编号:1017时间:2016年6月13日11:26:20功能:计算机硕士工资一览表 08年最新各大IT公司薪水行 URL :http://blog.csdn.net/icerock2000/artic ...

  9. Windows服务弹出MessageBox对话框

    Windows服务弹出MessageBox对话框 自从Windows升级到Vista版本后,系统服务就不在允许弹出那些惨绝人寰的MessageBox了(至于为什么不让弹出,原理有点小复杂,我也不是很门 ...

  10. Think Python - Chapter 10 - Lists

    10.1 A list is a sequenceLike a string, a list is a sequence of values. In a string, the values are ...