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

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条回答 默认 最新

  • bdmh 移动开发领域优质创作者 2021-11-21 19:19
    关注

    是不是你图片的问题,没有平铺

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 8月9日
  • 已采纳回答 8月1日
  • 创建了问题 11月21日

悬赏问题

  • ¥15 地图软件开发技术答疑(api, 地点获取,外观样式)
  • ¥20 物理远程控制麦克风使用问题
  • ¥15 打印预览会泄漏纸钱包密码吗
  • ¥15 在hololens1上运行unity项目只有空窗口
  • ¥25 TABLEAU PREP无法打开
  • ¥15 百度帐号问题/centos
  • ¥15 关于#c语言#的问题:求完整代码条件好说
  • ¥100 HALCON DELPHI
  • ¥15 (需要远程,AI不回)VB6二进制文件转换成功,但是C#转换总是失败
  • ¥15 关于#matlab#的问题:有没有什么其他办法能够保证不退出进程(相关搜索:matlab调用)