CSS内外边距和div居中

最新推荐文章于 2024-07-26 19:29:32 发布

思诚代码块

最新推荐文章于 2024-07-26 19:29:32 发布

阅读量1.2k

点赞数 1

分类专栏： CSS 系列笔记+源码展示文章标签： css 前端网页

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122792170

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，我们来分享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>

效果：
在这里插入图片描述

居中的效果：
在这里插入图片描述

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

源码：

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

显示结果：

在这里插入图片描述

整体源代码：

<!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>

效果
在这里插入图片描述
盒子的计算方式：

内容+内边距（padding）+边框（border）+外边距（margin）

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

思诚代码块

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS内外边距和div居中

大家好，我们来分享CSS内外边距和div居中看源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>/* 外边距 :使元素居中*/ #box{ width: 300px; border: 1
复制链接

扫一扫