CSS关于默认宽度-阿里云开发者社区

CSS关于默认宽度

2024-03-13 11

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS关于默认宽度

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            /* 设置了高度没有设置宽度 */
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图：

如果我们设置了margin值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: black;
        }
        .box {
            /* 设置了高度没有设置宽度 */
            height: 200px;
            margin: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

效果图：

我们设置padding试一试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: black;
        }
        .box {
            /* 设置了高度没有设置宽度 */
            height: 200px;
            padding: 0 100px;
            background-color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        11111111111111111111111111111111111111111111
    </div>
</body>
</html>