CSS内外边距和div居中

大家好,我们来分享CSS内外边距和div居中

看源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/* 外边距    :使元素居中*/


        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        /*    自动对齐*/
        }
        h2{
            font-size: 15px;
            background-color: greenyellow;
            line-height: 30px;
        }
        form{
            background: darkorchid;
        }
        input{
            border: 1px 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>

效果:
CSS内外边距和div居中_第1张图片

居中的效果:
CSS内外边距和div居中_第2张图片

在这个右下角也可以测试它

源码:

 h2{
            font-size: 15px;
            background-color: greenyellow;
            line-height: 30px;
            margin-top: 0;
        }

显示结果:

CSS内外边距和div居中_第3张图片

整体源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/* 外边距    :使元素居中*/


        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        /*    自动对齐*/
        }
        h2{
            font-size: 15px;
            background-color: greenyellow;
            line-height: 30px;
            /*margin:0 1px 2px 3px;*/
            padding: 10px;
            /*margin:0*/
            /*margin:0  1px*/
            /*margin:0   */
            /*margin:0 1px 2px 3px;*/
        }
        form{
            background: darkorchid;
        }
        input{
            border: 1px solid black;
        }
div:nth-of-type(1){
    padding: 10px  2px;
}
    </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>

效果
CSS内外边距和div居中_第4张图片
盒子的计算方式:

内容+内边距(padding)+边框(border)+外边距(margin)

好了,有关于CSS内外边距和div居中就到这里了,谢谢大家

你可能感兴趣的:(CSS,系列笔记+源码展示,css,前端,网页)