一般浏览器都给body加了外边距，margin:0应该能解决你所遇到的问题。但你很可能又会遇到其他奇怪的现象，比如说p的行高，在不同浏览器上显示不一致，最根本的解决方案还是重置浏览器默认样式。

可以使用目前兼容性较好的 necolas/normalize.css · GitHub

作者：子丶言

链接：https://www.zhihu.com/question/36208082/answer/66823204

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。





<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>div</title>

	<style> 

		body{

			margin:0;

		}

		#div_1{

			margin:0 auto;

			padding:0;

			background:orange;

			width:100%;

			height:300px;

			<!-- overflow:hidden; -->

			}

	</style>

</head>

<body>

	<div id="div_1" > 这是一个div </div>

</body>

</html>

为什么全部width:100%浏览器边缘存在留白？的更多相关文章

  1. safari手机浏览器的width:100%的自适应问题

    Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 浏览器 同样开启开发者模式后,进行联机调试.功能彪悍. 最近在做一个页面时,发现在 iPad 的 ...

  2. width:100% 和 max-width:100%; 有区别吗【转藏】

    这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...

  3. width:100%缩小窗口时背景图片出现空白bug

    页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...

  4. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  5. width:100%和width:inherit

    前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...

  6. 多方法解决设置width:100%再设置margin或padding溢出的问题

    2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...

  7. width:100%;与width:auto;的区别

    <div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...

  8. css width="100" style ="width:100px" 区别

    1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...

  9. width:auto; 和 width:100%;的不同

    width:auto:会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小.width:100%:会强制将元素变成和父元素一样的宽,并且添加额外 ...

随机推荐

  1. Ubuntu 设置 sudo 开机自启动项 无需输入密码

    如果你想设置一个需要sudo权限执行的开机自启动项,而不需要输入密码,那么你需要把该程序加入  /etc/sudoers 中.要直线这个, 首先执行 sudo visudo ,在文件最后加入下面一行 ...

  2. WeX5入门之欢乐捕鱼打包

    一.下载欢乐捕鱼的素材包 https://files.cnblogs.com/files/wordblog/%E7%B4%A0%E6%9D%90.zip 二.把欢乐捕鱼素材放入项目中 并启动tomca ...

  3. [MySQL优化案例]系列 — 优化InnoDB表BLOB列的存储效率

    首先,介绍下关于InnoDB引擎存储格式的几个要点:1.InnoDB可以选择使用共享表空间或者是独立表空间方式,建议使用独立表空间,便于管理.维护.启用 innodb_file_per_table 选 ...

  4. Linux input子系统学习总结（一）---- 三个重要的结构体

    一 . 总体架构 图 上层是图形界面和应用程序,通过监听设备节点,获取用户相应的输入事件,根据输入事件来做出相应的反应:eventX (X从0开始)表示 按键事件,mice 表示鼠标事件 Input ...

  5. 浅谈mysql配置优化和sql语句优化【转】

    做优化,我在这里引用淘宝系统分析师蒋江伟的一句话:只有勇于承担,才能让人有勇气,有承担自己的错误的勇气.有承担错误的勇气,就有去做事得勇气.无论做什么事,只要是对的,就要去做,勇敢去做.出了错误,承担 ...

  6. mvc 分部视图(Partial)显示登陆前后变化以及Shared文件夹在解决方案资源管理器中没有显示的问题

    刚开始我的解决方案资源管理器中没有显示Shared文件夹,但Shared文件夹在项目中是实际存在的,我搜了下好像没有类似的解答(可能是我搜索的关键词不够准确).后来自己看了下vs2012. 其实解决方 ...

  7. 22 Gobs of data 设计和使用采集数据的包

    Gobs of data 24 March 2011 Introduction To transmit a data structure across a network or to store it ...

  8. SQLite数据库初步

    Windows 10家庭中文版 想使用Python操作SQLite数据库,可是,不知道怎么建立数据库文件. 在SQLite官网溜达了一圈,总算使用上面的工具安装了建立了我需要的数据库文件. 1.进入官 ...

  9. git —— 异常1，index.lock

    git提交过程中出现的问题 解决方法:找到 index.lock文件将其删除 一般 index.lock 在.git下面, 有时 .git 是隐藏的,但是无论怎样, 可以通过 everything 找 ...

  10. json字符串与java对象的相互转换(jackson)

    1.java对象转换为json字符串 package com.chichung.json; import com.fasterxml.jackson.core.JsonProcessingExcept ...