html页面多出一部分空白的怎么消除
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html页面多出一部分空白的怎么消除相关的知识，希望对你有一定的参考价值。
html页面出现空白的原因很多。下面举一个空白的例子：
例子：
图一：现在所示的是有边距的情况。
图二：在head标签中加入“<style> body,pmargin: 0; </style>”后的情况
总结：html标签很多都有默认元素，需要一开始就重写这些元素的外边距或者内边距；例如：*margin：0；padding：0
参考技术A 空白肯定不会是无缘无故的，最好把图或者代码发出来：1.没有reset样式，很多标签都是自带样式的，比如body,h1-6,p,ol,ul自带margin值；而ol,ul自带padding值。这些值就会出现空白的（在没有设置背景色的情况下，是透明的那么就透过去看起来效果就是白色）；
解决方法：在样式表开始的时候添加reset:
body,h1,h2,h3,h4,h5,h6,p,ol,ul
margin: 0;
ol,ul
padding: 0;
ol,ul
list-style: none;
a
text-decoration: none;
em
font-style:normal;
尽量根据自己的需要添加标签reset,当然如果懒得话也可以去下载一些reset.css
2.自己设置了高度，但是，内容太少，不和谐，于是你就看到了很多的空白（横向也是一样的原理）
解决方案：
除非必要不要将高度定死，尽量自适应：height:auto（这是默认值），如果被覆盖了，可以添加这个属性改回来
3.有换行标签比如<br>标签
解决方案：
找到空白所对应的代码，在确定没有编码错误的前提下,找到<br>;然后删掉，需要换行的时候尽量用到一些拥有块状属性的标签，比如div,p之类的标签 参考技术B
页面多出空白的原因有：
元素写了内边距或者外边距。
元素自带的边距。
具体情况希望可以把代码贴出来一张图帮您分析下。
清除HTML文档内的<br>标签
排除方案二：
检查CSS代码中：padding、margin所设置的值是否过大！
排除方案三：
检查是否设置了固定高度如：height:10000px本回答被提问者采纳 参考技术D 块级元素没有设置宽度，然后用了定位或浮动就会把窗口撑开
font-size:0; 消除空白间隙
使用font-size:0解决设置inline-block引起的空白间隙问题
一、空白间隙问题
在进行页面布局的时候为了页面代码所谓整洁刻度，往往会设置缩进或是换行，但是元素display为inline-block或是inline时，行内元素虽然没有设置 margin值，这些换行或是缩进。还是会出现空白间隙。
如下所示：
HTML部分
<div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div>
CSS部分
#box2{ width:240px; height:240px; background-color:#aaf; display:inline-block; } #box1{ width:240px; height:60px; background-color: #eef; } #box3{ width:60px; height:240px; background: #ddf; display:inline-block; }
由于排版原因，虽然没有设置 margin ，两个div之间还是出现了空白间隙。这是由于排版换行的原因两个div之间才留下了空白字符，导致间隙的产生。
二、解决空白间隙
1、将两个div元素不换行，写成一行。也可以解决这个问题，但是这并不是最好的方法
HTML代码
<body> <div id="box1">1</div> <div id="box2">2</div><div id="box3">3</div> </body>
CSS代码
#box2{ width:240px; height:240px; background-color:#aaf; display:inline-block; } #box1{ width:240px; height:60px; background-color: #eef; } #box3{ width:60px; height:240px; background: #ddf; display:inline-block; }
2、解决这个问题，最好方式是给元素加上一个父元素，给父元素font-size:0。（这样会导致元素中的文字消失，还要在另外给元素中的文字设置大小，文字最小是12px）
HTML部分
<div style="font-size:0">
<div id="box1">1</div>
<div id="box2">2</div><div id="box3">3</div>
</div>
三、其他元素
（一）、<a> 超链接出现空白间距
<a href="#" style="background:#99f">我也是超链接</a>
<a href="#" style="background:#f99">我是一超链接</a>
<a href="#" style="background:#9f9">好巧咱们都是超链接</a>
因为在代码排版的时候，<a>换行了，所以每个超链接之间会有空白间隙。a元素默认的是行内块元素
解决方法：
1、写成一行；
<a href="#" style="background:#99f">我也是超链接</a><a href="#" style="background:#f99">我是一超链接</a><a href="#" style="background:#9f9">好巧咱们都是超链接</a>
2、在a 元素外面添加一个父元素，在父元素中设置 font-size:0；这样超链接文字大小就变成了0，还要单独设置样式 font-size: 16px;。
HTML部分
<div style="font-size:0px; ">
<a href="#" style="background:#99f">我也是超链接</a>
<a href="#" style="background:#f99">我是一超链接</a>
<a href="#" style="background:#9f9">好巧咱们都是超链接</a>
</div>
CSS部分
a{ font-size: 16px;}
（二）图片之间出现间隙
<img src="1.jpg" width="200px" height="200px"> <img src="2.jpg" width="200px" height="200px">
解决方法：
1、写成一行；
<img src="1.jpg" width="200px" height="200px"><img src="2.jpg" width="200px" height="200px">
2、设置父元素 font-size:0;
<div style="font-size:0px; ">
<img src="1.jpg" width="200px" height="200px">
<img src="2.jpg" width="200px" height="200px">
</div>
以上是关于html页面多出一部分空白的怎么消除的主要内容，如果未能解决你的问题，请参考以下文章
HTML网页打印 style="page-break-after:always;" 总有一张空白页
html页面中怎么出现空白部分,就像百度首页一样上部分和下部分有空白、？