• 盒模型--边界


    盒模型--边界

    元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:

    div{margin:20px 10px 15px 30px;}

    也可以分开写:

    div{
       margin-top:20px;
       margin-right:10px;
       margin-bottom:15px;
       margin-left:30px;
    }

    如果上右下左的边界都为10px;可以这么写:

    div{ margin:10px;}

    如果上下边界一样为10px,左右一样为20px,可以这么写:

    div{ margin:10px 20px;}

    总结一下:padding和margin的区别,padding在边框里,margin在边框外。

    实例:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>边距</title>
    <style type="text/css">
    div{
        width:300px;
        height:300px;
        border:1px solid red;    
    }
    #box1{padding:30px;}
    #box2{padding:30px;}
    #box1{margin-bottom:100px;}
    </style>
    </head>
    <body>
        <div id="box1">box1</div>
        <div id="box2">box2</div>   
    </body>
    </html>
  • 相关阅读:
    HelloWorld入门程序
    再写博客
    iOS--小结系列一
    iOS--ARC
    ios--block
    iOS--protocol
    iOS--内存管理
    指针基本概念
    ZooKeeper系列之十:ZooKeeper的一致性保证及Leader选举
    ZooKeeper系列之九:ZooKeeper API简介及编程
  • 原文地址:https://www.cnblogs.com/iBoundary/p/11433891.html
Copyright © 2020-2023  润新知