HTML5第六课时，margin外边距

最新推荐文章于 2024-06-21 01:00:00 发布

甲戌天火

最新推荐文章于 2024-06-21 01:00:00 发布

阅读量1.2k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/70246091

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>margin外边距</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*标签选择器*/
        div{
            height: 300px;
            width: 500px;
            background-color: #585858;
            color: white;
            font-size: 50px;
            /*margin-left: 262px;假设屏幕是1024，div宽度500，剩下524，除以2得到262，让div居中
                但是当浏览器缩小的时候，又不居中了。应该用margin:0 auto*/
            margin: 0 auto;
            margin-bottom: 30px;
            /*line-height: 50px;
            文本没有紧贴上方显示，加上行高跟字体大小一样，就可以紧贴着显示*/
            /*margin-top: 20px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 20px;*/
            /*上面等价于，margin:20px 50px 50px 20px;顺序是上右下左
                如果是margin:20px 50px;就是上下20px，左右50px
                如果margin:20px;是上下左右都是20px
                如果margin:20px 50px 20px;是上20px，左和右是50px，下是20px*/
            text-align: justify;/*文字两端对齐。*/
            border-top: 20px dashed red ;
            border-right: 20px solid red;
            border-bottom: 20px dotted red;
            border-left: 20px double red;
            /*border会影响文字的区域，但是不会改变div的大小。*/
        }
        p{
            background-color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div>
    扭转星辰扭转星辰扭转星辰扭转星辰扭转星辰扭转星辰扭转星辰
</div>
<p>十盗偷天</p>

</body>
</html>