其他分享
首页 > 其他分享> > 内外边距及div居中

内外边距及div居中

作者：互联网

内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外边距的妙用：居中元素
    margin: 0 auto;
    -->
    <style>

        #box{
            width:300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        /*
        顺时针旋转
        margin:0
        margin:0 1px
        margin:0 1px 2px 3px
        */
        h2{
            font-size: 16px;
            background-color:#931cff;
            line-height: 30px;
            color:white;
            margin: 0 1px 2px 3px;
        }
        form {
            background: #45a8ff;
        }
        input{
            border:1px solid black;
        }
        div:nth-of-type(1){
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>姓名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>

</div>
</body>
</html>

盒子的计算方式：你这个元素到底多大？

margin+border+padding+内容宽度

标签：居中,3px,solid,margin,1px,black,div,border,距及
来源： https://www.cnblogs.com/wshjyyysys/p/15879307.html