css 外边距,内边距的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding和margin的用法</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background:tan;

            /*1个参数:4边*/
            padding:30px;
            /*2个参数:上下 左右*/
            padding:10px 20px;
            /*3个参数:上 左右 下*/
            padding:10px 20px 30px;
            /*4个参数:上 右 下 左*/
            padding:10px 20px 30px 40px;

            /*padding-top:10px;
            padding-right:20px;*/

            /*margin:0 100px;*/

            /*margin-left:auto;
            margin-right:auto;*/

            /*让块级元素水平居中*/
            margin:0 auto;
        }
        b{
            background:orange;
            /*margin:0 auto;*/
            /*给行级标签的父元素加text-align:center就可以让行级元素居中*/
            text-align:center;
        }
    </style>
</head>
<body>
    <div style="text-align:center"><b>行级标签</b></div>
    <div class="box">你们峰哥跟我说:他一直就很喜欢小林子!那不直的时候呢?</div>
</body>
</html>
<!-- 
padding 内边距
    padding 统一设置内边距
        padding:4边
        padding:上下 左右
        padding:上 左右 下
        padding:上 右 下 左
    padding-top
    padding-right
    padding-bottom
    padding-left


margin 外边距
    margin 统一设置外边距
        margin:4边
        margin:上下 左右
        margin:上 左右 下
        margin:上 右 下 左
    margin-top
    margin-right
    margin-bottom
    margin-left

    小提示:margin:0 auto 可以让块级元素水平居中
-->

猜你喜欢

转载自www.cnblogs.com/LF-place/p/10536944.html