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. Java Abstract Class

    在Baths-stomp里面的每个Fluent Interface Interactor Impl,都继承了MarketDataAccessor,which is an abstract class. ...

  2. UVA11624（bfs）

    题意:给一张图,有火源,有障碍物,剩下的是道路,火源在下一分钟能够让上下左右四个方向的道路也着火,告诉人的位置,问最短时间能逃出去的时间是多少: 思路:一个bfs用来求出所有的火源能蔓延到的地方,另一 ...

  3. 通过 itms-services 协议，发布或者分享 iOS 应用程序

    导读:itms-services 协议常用于 iOS 企业应用的无线部署,这可在不使用 iTunes 的情况下将内部软件发布或者分享给用户. 一.前期准备资料: 1.应用程序 (.ipa) 文件(使用 ...

  4. GIT之一 起步篇

    关于版本控制 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.如果你是位图形或网页设计师,可能会需要保存某一幅图片或页面布局文件的所有修订版本.采用版本控制系统(VCS) ...

  5. HDU 2829 Lawrence （斜率DP）

    斜率DP 设dp[i][j]表示前i点,炸掉j条边的最小值.j<i dp[i][j]=min{dp[k][j-1]+cost[k+1][i]} 又由得出cost[1][i]=cost[1][k] ...

  6. 设置dt height 保证dd在同一行

    <html>   <head>   <meta charset="UTF-8">   <meta name="Author&qu ...

  7. AttributeError: 'dict_values' object has no attribute 'translate'

    /***************************************************************************************** * Attribu ...

  8. 使用innerHTML生成的script节点不会发出请求与执行text属性

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 在Python中，令values=[0,1,2];values[1]=values,为何结果是[0,[...],2]?

    转载自:http://www.zhihu.com/question/21000872/answer/16856382>>> values = [0, 1, 2] >>&g ...

  10. 织梦dedecms模板调用标签大全-提高制作模板速度

    关键描述调用标签: ——————————————————————————–模板路径调用标签: {dede:field name=’templeturl’/}—————————————————————— ...