如何处理html和body上的页边距折叠？
提问于 2013-05-20 21:40:59
我有一个简单的布局，由一个左边的菜单区域和右边的内容区域组成。这两个文件中的每一个都是一个iframe，因为我只需要将pdf文件加载到内容区中。我已经为浏览器大小和我想要的布局调整大小，除了滚动条出现在右边，我在底部有一个很小的区域。下面是CSS：
@charset "utf-8";
html
{
font:100% Arial, Helvetica, Sans Serif;
height:100%;
padding:0px;
margin:0px;
}
body
{
height:100%;
padding:0px;
margin:0px;
}
#wrapper
{
margin: 0 auto;
width:100%;
height:100%;
}
#menu{
height:100%;
float:left;
width:15em;
}
#content{
height:100%;
margin-left:15em;
text-align:left;
}
iframe{
width:100%;
height:100%;
border:0;
}而且HTML非常简单(iframe html根本没有样式)：
<!DOCTYPE html>
<html>
<head>
<title>RPWRF O&M Manual</title></head>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
<body>
<div id="wrapper">
<div id="menu">
<iframe frameborder="0" src="left.html" name="menuframe">
</iframe></div>
<div id="content">
<iframe frameborder="0" src="right.html" name="contentframe">
</iframe></div>
</div>
</body>
</html> 
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-05-20 21:57:31
你应该在iframe上设置display: block;。iframe本质上是内联元素，并且内联元素位于周围文本的基线上。基线允许下行(g的尾部等)。而空白是由下级(即使没有)占用的空间。
设置display: block;将删除添加的空白，并删除不需要的滚动条。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16658864
复制相关文章
![[Java小工匠]CSS盒子模型-边距合并](https://ask.qcloudimg.com/http-save/yehe-2512807/6rhyw9fvjz.png)
点击加载更多
腾讯云开发者
