15、内外边距及div居中

最新推荐文章于 2024-11-04 20:00:00 发布

工一木子

最新推荐文章于 2024-11-04 20:00:00 发布

阅读量164

点赞数

分类专栏： CSS学习文章标签： css html html5

本文链接：https://blog.csdn.net/Prince140678/article/details/120389673

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

4.3、内外边距

<!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 10px;//上 右
            margin: 0 10px 20px; //上 右 下
            margin: 0 10px 20px 30px;// 上 右 下 左
            */
            h2 {
                font-size: 16px;
                background-color: #11800e;
                line-height: 30px;
                color: wheat;
                margin: 0 10px;
                margin: 0 10px 20px 30px;
            }
            form {
                background: #24D4FD;
            }
            input {
                border: 1px solid black;
            }
            div:nth-of-type(1) {
                border: 1px solid orange;
                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="password">
                </div>
                <div>
                    <span>邮箱：</span>
                    <input type="text">
            </form>

        </div>

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUnN4lIF-1632110355523)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\15、内外边距及div居中.assets\image-20210920114336149.png)]$

margin+border+padding+内容宽度

彩蛋

1.在浏览器快速修改盒子的margin，border，padding

未修改前：
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocQTBxag-1632110355527)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\15、内外边距及div居中.assets\image-20210920115002108.png)]$

修改后：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S7C4Hg8Q-1632110355529)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\15、内外边距及div居中.assets\image-20210920115030103.png)]$