如何消除页面边缘的间隙?

2024-06-11

我已经将主体和两个 div 的边框、内边距和边距设置为 0px。但我似乎仍然无法摆脱差距。

#body{
 padding: 0px ;
 border:0px ; 
margin:0px;
width:100%;
height:100vh;
}


#mainPage {
height:100vh;
width:100%;
background-color: #2469ff;
padding: 0px;
border:0px; 
margin:0px;
}

#navBar{

height:70px; 
width:100%;
Background-color: #1f1f1f;  
padding: 0px ;
border:0px ; 
margin:0px;
}

到目前为止,这就是我的全部 CSS 内容。

这是我的 HTML。目前这是非常基本的。

<html>  
     <head>    
     <title>
     Ice Arena
     </title>          
     </head>    
     <body>       
          <div id="mainPage">       
              <div id="navBar">      
              </div>  
              <div id="leftPanel">      
              </div>   
          </div>    
     </body>
</html>

正如我所说,我不知道为什么要这样做。我确信我犯了一个错误,我还是 CSS 和 HTML 的初学者。


使用以下命令删除默认边距body:

html,
body {
  margin: 0;
}

我强烈建议您阅读以下内容:

HTML 元素的默认 CSS 值 https://www.w3schools.com/cssref/css_default_values.asp

默认 CSS 值body[显示:块;边距:8px;]

#body {
  padding: 0px;
  border: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}

#mainPage {
  height: 100vh;
  width: 100%;
  background-color: #2469ff;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#navBar {
  height: 70px;
  width: 100%;
  Background-color: #1f1f1f;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

html,
body {
  margin: 0;
}
<html>

<head>
  <title>
    Ice Arena
  </title>
</head>

<body>
  <div id="mainPage">
    <div id="navBar">
    </div>
    <div id="leftPanel">
    </div>
  </div>
</body>

</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何消除页面边缘的间隙? 的相关文章

  • 如何将-webkit-gradient应用到IE上?

    我有以下 CSS 代码 webkit gradient linear left bottom left top from 5AE to 036 Chrome 中的背景显示效果非常好 Internet Explorer 仅显示白色背景 我尝试
  • 当虚拟键盘出现时,三星 Android 上的 Html 输入失去焦点

    我在使用 html5 Web 应用程序的 Samsung Galaxy Tab A Android 7 0 上遇到输入元素失去焦点的问题 这似乎是android中的一个问题 就像在windows 10或iOS上一样 尽管弹出虚拟键盘时也会触
  • 如何使用带有 ID 的单独播放按钮播放多个 HTML5 视频

    我有一个 HTML5 视频列表 其中也有一个播放按钮 每个播放按钮都有一个唯一的标识符 作为类名 然后每个视频都有一个匹配的类名 这样我就可以将特定的按钮分配给特定的视频进行播放 HTML
  • HTML5 Canvas - 在画布上绘图、保存上下文并稍后恢复

    要求 现在 在画布上绘制 然后点击 保存 存储画布状态 离线绘制 但不作为图像 稍后 打开画布并显示之前保存的绘图 然后继续再次绘制 对于绘图 我们通常使用如下代码 canvas document getElementById can ct
  • Chrome - 儿童剪辑CSS3圆形边框?

    请参阅以下 JSFiddle http jsfiddle net zScKW http jsfiddle net zScKW 请注意 子 div 剪裁了其父 div 的边框 如果我删除边框 但保留圆角 该项目将按照我们的预期进行剪辑 Fir
  • 可以在 iPad 上自动播放 HTML5 视频吗?

    The
  • 不显示 ul 中的项目符号 [重复]

    这个问题在这里已经有答案了 我在 ul 中显示项目符号时遇到问题 有谁知道问题出在哪里 my site http www minikoblizky wz cz zamestnanci html它以 Co od v s o ek v me 开
  • 网页CSS覆盖ckeditor 3样式

    我有一个加载 screen css 的页面 其中包含evil规则 由于各种原因我无法删除或修改 a background red important I use CK编辑器3 x http ckeditor com 在同一页面上 问题是 无
  • 我们可以为 border-bottom 属性设置渐变颜色吗? [复制]

    这个问题在这里已经有答案了 我们可以添加渐变颜色吗border bottomhtml块元素的属性 边框应该与此类似 谁能告诉我这在 CSS3 中是可能的吗 我像这样尝试过 但无法让它工作 border gradient border bot
  • CSS水平导航间距

    我正在尝试用 css 创建一个水平导航栏 其中包含 5 个均匀间隔的链接 html 希望保持这样 div ul li a href one html One a li li a href two html Two a li li a hre
  • onclick链接/按钮获取数据属性值

    span class btn btn block btn inverse btn icon glyphicons home i i Daily span span class btn btn block btn inverse btn ic
  • 为什么我的 css 在 IE9 中无法正确显示?

    几个小时前 我对我的 WordPress 主页做了一个小改动 现在 IE9 中出现了一些以前不存在的随机奇怪 CSS 问题 我曾使用 IE 的开发工具来尝试找出问题所在 但该工具与 firebug 相比实在是太糟糕了 而且问题只出现在 IE
  • Bootstrap 多选限制问题

    我使用创建了一个多选下拉列表引导多选 http davidstutz github io bootstrap multiselect 我需要在选项选择中设置一个限制 这里我将其设置为 5 如果达到限制 我只需禁用其他选择选项 它就可以完美工
  • 如何使 :focus, :active 与 :hover 相同

    有没有简单的方法使 focus 和 active 表现得像 hover 通常我写 class a hover class a active class a focus 但我只想写一个 hover 规则 并且 focus active 看起来
  • 在移动 Safari 上自动播放音频

    在我被火烧死之前 我知道这目前不起作用 因为苹果担心自动下载音频文件 然而 我的问题是 有人找到了狡猾的解决方法吗 我只想在游戏启动时播放启动声音 目前必须等待用户单击某处才能播放音频 你们中的一个聪明人现在一定已经成功了吗 没有机会在移动
  • 删除 twitter bootstrap 中的行

    我正在使用 twitter bootstrap 来执行一些我被迫执行的网络应用程序 我不是网络开发人员 但我找不到一种方法来禁用表的行线 正如你可以看到引导文档 http getbootstrap com components panels
  • 如何在JavaFX中获得狭窄的进度条?

    正如标题所说 我需要制作一个细进度条 我用过这个 progressBar setMaxHeight 0 1 progressBar setPrefHeight 0 1 但这行不通 有人有想法吗 你必须搞乱样式才能让它变小 我真的建议看看ca
  • CSS 悬停+背景图片

    我正在使用 HTML CSS 创建一个特殊的 UI 控件来模仿 Windows 7 控制面板按钮 到目前为止 我已经完成了正确的布局 现在我想为其添加一些修饰 如图所示 当您将鼠标悬停在按钮上时 会出现渐变 http m cncfps co
  • 将画布下载为 PNG 图像[重复]

    这个问题在这里已经有答案了 当我尝试将画布下载为 PNG 图像时 浏览器会在新页面中打开该图像 但不下载它 我的下载代码 btnScaricaEtichetta click function console log Download loc
  • 如何使相对div居中?

    我一直在尝试让以下代码工作几个小时 但没有成功 您能帮我将项目 div 居中吗 即使页面放大和缩小时 这是我的 HTML 和 CSS bottom position absolute top 100 left 0 right 0 backg

随机推荐

  • 活动侦听器 - Google 云消息传递 - BroadcastReceiver

    我已经在我的 Android 应用程序中实现了 GCM 并且它在接收消息方面工作正常 BroadcastReceiver 是根据 Google 提供的示例在清单文件中设置的 我的问题如下 如果用户打开应用程序并且我想更新该视图中的一些结果
  • linux + ksh + 向下舍入或向上舍入 - 浮点数

    在我的 ksh 脚本中 我只需要计算整数 有时我会得到浮点数 例如 3 49 或 4 8 等 所以我需要根据以下规则将浮点数转换为整数 示例 3 49 will be 3 2 9 will be 3 4 1 will be 4 23 51
  • 根据值列表对 XSLT 中的 XML 进行排序

    我想使用 XSL 转换对一个 XML 文件进行排序
  • 使用jquery,下拉列表选择更改时如何重定向?

    我有一个下拉列表 如果有人选择一个选项 我想根据选择重定向到另一个页面 我怎样才能通过 jquery 做到这一点 将逻辑绑定到 change 事件 并从中获取当前值 val 以确定用户应该被重定向到哪里 此示例假设位置直接存储在值本身中 m
  • 如何在 Windows 和 Python 2.7 上模拟 os.path.samefile 行为?

    给定两个路径 我必须比较它们是否指向同一个文件 在 Unix 中 这可以通过以下方式完成os path samefile 但正如文档所述 它在 Windows 中不可用 模拟此功能的最佳方法是什么 它不需要模拟常见情况 就我而言 有以下简化
  • system.web.http.HttpError 的.Net 标准/核心版本

    从 net Framework 迁移到 net Standard Core 时 我遇到了 HttpError 类 除了兼容性垫片之外 我在 net core standard 中找不到任何等效项 这只是一个临时解决方案 不知道官方有没有替代
  • SQL链接服务器查询非常非常慢

    我正在通过链接服务器从视图中提取大量数据 我使用的是 SQL Server 2012 链接服务器是 SQL Server 2008 我的选择语句是 SELECT INTO MY LOCAL TABLE FROM SELECT FROM LI
  • 来自外部 DLL 的未处理的 DivideByZero 异常 - C#

    我有一个 C net 4 0 程序 其主要功能是从外部 FTP 库 项目引用的 dll 调用方法 逻辑位于 try catch 块中 catch 会打印错误 异常处理程序有一个通用参数 catch Exception ex IDE是VS 有
  • 这是重载,不同类中具有相同名称和不同签名的方法吗?

    如果我有以下 Java 代码 class A public int add int a int b return a b class B extends A public float add float a float b return a
  • Prism 应用程序中的数据模型位于何处?

    我无法将数据模型放置在 Prism 应用程序中的何处 大多数 如果不是全部 数据将来自网络服务 并且每个模块的网络服务都是唯一的 不幸的是 有些对象需要共享 例如人员 用户对象 我真的很困惑是否将这些服务直接添加到模块中 以便每个服务真正独
  • Java 更改包名称大小写约定的原因

    就在你说这是重复的之前 我已经看到了其他问题 但我仍然想发布这个 所以我在读用 Java 思考 Bruce Eckel这段话是关于小写命名约定的 Java 1 0 和 Java 1 1 中的域扩展com edu org net等 按照惯例都
  • 如何在 Java 中从任意基数转换为基数 10

    我是 Java 新手 我想编写一个程序 仅使用算术运算将基数 2 3 4 5 6 7 8 9 16 转换为基数 10 我已经完成了从键盘读取字符串 如果数字是十六进制 并将其转换为整数 之后我做了一个 while 循环 将数字分割为数字并将
  • 如何从c调用Java函数

    我被这个问题困扰了 我需要从 c c 调用 Java 函数 在示例和教程中 我只看到一个java应用程序调用一个c方法 并在同一个方法中调用另一个java方法 但我想做的是从代码的任何部分调用java方法 这就是我所拥有的 static J
  • Boost Hana 实现自定义序列

    我面临着一种情况 我通常会通过继承来创建自定义类boost hana tuple 例如 通过使用以下代码 template
  • Xamarin - 未找到类(Android 支持库)

    我正在尝试使用 AppCompat 实现具有向后兼容性的 Material Design 继tutorial https blog xamarin com android tips hello material design v7 appc
  • 如何使用修订号而不是 GUID(在 TeamCity 中)标记我的构建?

    我正在尝试与 TeamCity 进行 持续集成 我想以增量方式标记我的构建 而 VCS 提供的 GUID 不如简单递增的数字那么有用 我希望该数字与 Mercurial 中的修订版数字实际匹配 我的情况 水银信息 我希望将构建标记为 0 0
  • 将 NSTabViewItem 的副本从 NSTabView 添加到同一个 NSTabView

    我正在创建一个简单的网络浏览器 并希望实现选项卡 为此 我使用NSTabView 我基本上希望每个选项卡都有一个WebView这将显示网站已加载 我从只有一个选项卡开始 并希望在创建新选项卡时添加第一个选项卡的精确副本 我尝试过类似的东西t
  • 如何获取和比较libcurl版本?

    我正在使用 libcurl 设置 OAuth 2 0 访问令牌 自 libcurl 7 33 起CURLcode curl easy setopt CURL handle CURLOPT XOAUTH2 BEARER char token
  • 为什么这个递归连接会产生:数据太长

    我在 MySQL 8 上有这个表 create table tbl id varchar 2 val int insert into tbl values A 1 B 2 C 3 D 4 E 5 以下查询应找出哪些记录集的值之和不大于 6
  • 如何消除页面边缘的间隙?

    我已经将主体和两个 div 的边框 内边距和边距设置为 0px 但我似乎仍然无法摆脱差距 body padding 0px border 0px margin 0px width 100 height 100vh mainPage heig