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. C++ algorithm 里的sort函数应用

    MSDN中的定义: template<class RanIt>    void sort(RanIt first, RanIt last); //--> 1)template< ...

  2. coins_多重背包

    ps:原来用新浪,可是代码的排版不是很好,所以用博客园啦,先容许我把从八月份开始的代码搬过来,从这里重新出发,希望这里可以一直见证我的成长. Time Limit: 2000/1000 MS (Jav ...

  3. 将List转换成DataTable

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  4. NBU 2475 Survivors(RMQ线段树)

    NBU 2475Survivors 题目链接:http://acm.nbu.edu.cn/v1.0/Problems/Problem.php?pid=2475 题意:给定n个人,每个人有strengt ...

  5. Linux Shell 命令

    (1) 操作一个文件并对文件查询行进行切分处理 (或者1-) (2) 操作文件进行去重并显示重复次数 | sort | uniq -c (3) 查看总的汇总行数 | sort | uniq -c | ...

  6. xp 共享 guest

    一.首先启用guest来宾帐户 二.控制面板→管理工具→本地安全策略→本地策略→用户权利指派里,“从网络访问此计算机”中加入guest帐户,而“拒绝从网络访问这台计算机”中删除guest帐户: 三.我 ...

  7. Java字符串null相加

    Java字符串null相加 最近和同事讨论了下面的一段代码: String a = null; a += a; System.out.println(a); 运行结果: nullnull 本着学习的态 ...

  8. 右键菜单添加程序，指定图标， Notepad2、Sublime Text 2

    右键添加Sublime Text 打开方式 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Sublime Text] ...

  9. iOS学习笔记---网络请求

    一.HTTP协议的概念 HTTP协议:Hyper Text Transfer Protocol(超文本传输协议)是用于从万维网服务器传送超文本到本地浏览器的传输协议.HTTP是一个应用层协议,由请求和 ...

  10. 理解 %IOWAIT (%WIO)

    %iowait 是 “sar -u” 等工具检查CPU使用率时显示的一个指标,在Linux上显示为 %iowait,在有的Unix版本上显示为 %wio,含义都是一样的,这个指标常常被误读,很多人把它 ...