小布菌sama
2021-11-21 18:44
采纳率: 71.4%
浏览 65
已结题

html页面两侧留白,尝试清除所有标签padding和margin

问题遇到的现象和发生背景

登陆页面两侧留白

问题相关代码,请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到登陆界面</title>
    <style>
        *{
            margin:0 0;
            padding:0 0;
        }
        body {
            margin:0px;
            padding:0px;
            border:0px;
        }
        /**/
        .container {
            position: relative;
            margin:0 0;
            padding:0 0;
            min-height: 160px;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
        }
        .top{
            margin: 0;
            padding: 0;
        }

        .top .background {
            margin:0;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit:cover;
        }
        .top .earth {
            margin:0;
            z-index: 2;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="top">
        <img class="background" src="1.png"/>
        <img class="earth" src="地球.png"/>
        <p>在线打卡</p>
    </div>
</div>
</body>
</html>
运行结果及报错内容

img

我的解答思路和尝试过的方法

初始化css,将所有标签的padding和margin设置为0

我想要达到的结果

清除两侧白边

3条回答 默认 最新

相关推荐 更多相似问题