div有上下空白怎么消除

Posted 2023-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div有上下空白怎么消除相关的知识，希望对你有一定的参考价值。

代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<html>
<head><base target="_blank" />
<style type="text/css">

div#containerwidth:800px;margin:0 auto
div#headerbackground-color:#333; width:800px; color:white; text-align:center;
div#contentbackground-color:#ccc; width:800px; height:900px;
h1margin-bottom:0;
ul.no1margin-left:10em; list-style-image:url(../x2.png);
list-style-position:inside; text-align:center;
a display:inline-block;padding:0 0 10px 5px
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>测试导航以及链接样式</h1>
</div>
<div id="content">
<a href="http://baidu.com">百度</a>
<a href="http://google.com">Google</a>
<a href="http://qq.com">QQ</a>
<a href="http://bu888.com">布八</a>

<ul class="no1">
<li>ONE</li>
<li>TWO</li>
</ul>
</div>
</div>
</body>
</html>

第一种方法：<!doctype html>文档声明不规范
不需要修改css，只需要更换声明为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
即可

第二种方法：
把图片设置为块级元素
img display:block;

第三种：
img vertical-align:top; 参考技术A *padding:0; margin:0

把这句加到CSS里第一个，用于清除所有标签的默认边距

追问

无效

追答

有效



 参考技术B *padding:0; margin:0

重置下padding和margin

本回答被提问者采纳参考技术C 楼主你用，css结构语言，控制，属性是margin:0px;padding:0px; 参考技术D div#containerwidth:800px;margin:0 auto 0 auto;

如何消除不同类 = 行（引导程序）中两个 div 之间的空格？

【中文标题】如何消除不同类 = 行（引导程序）中两个 div 之间的空格？【英文标题】：How to eliminate whitespace between two divs in different class=row's (Bootstrap)? 【发布时间】：2015-08-19 04:48:37 【问题描述】：

看起来不错，除了在垂直平板电脑浏览器上。由黑色 div 的高度强制显示红色和蓝色 div 之间的空白。

在解决方案中，平板电脑/手机屏幕上 div 的堆叠顺序为蓝色 > 黑色 > 红色也很重要。

            <html>
            <div class="container">
            <div class="row">
            <div class="col-sm-7"><div class="blue"><img src="jpg"> Lots of whitespace appears below between 768 to aprx 900 px browser width (tablet dimenions)</div></div>
            <div class="col-sm-5"><div class="black">Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text</div>
            </div>   
            </div>
            </div>     
            <div class="container">
            <div class="row">
            <div class="col-sm-7"><div class="red">Red</div></div>
            <div class="col-sm-5"><div>
            </div>   
            </div>
            </html>

https://jsfiddle.net/g7xg0uc7/1/

【问题讨论】：

您期待什么？每行都以结尾，因此 div 会随着每行添加而向下移动。 【参考方案1】：

尽我所能：https://jsfiddle.net/g7xg0uc7/12/

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-7">
            <div class="blue">
                <img src="https://wiki.creativecommons.org/images/9/97/8256206923_c77e85319e_n.jpg" /> Lots of whitespace appears below between 768 to aprx 900 px browser width (tablet dimenions)
            </div>
        </div>
        <div class="col-xs-12 col-sm-5" style="float: right;">
            <div class="black">
                Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text
           </div>     
        </div>   
        <div class="col-sm-7">
            <div class="red">Red</div>
        </div>
     </div>   
  </div>

CSS：

.black width:100%; color: #fff;background-color: black ; padding:10px; float: right;
.red width:100%; background-color:red;  color: #fff; padding:10px; float: left;
.blue width:100%; background-color:blue; color: #fff; padding:10px
img width:100%

抱歉，如果我删除了您需要的容器，请尝试清理代码以使答案清晰。如果您不喜欢内联样式，可以将该内联浮点数整理到一个类中。

【讨论】：

【参考方案2】：

如果您将所有col-sm-# 更改为col-md-#，则它会将空白区域从图像底部和红色 div 中移开，但在这 2 和充满文本的黑色 div 之间仍然存在空白。

试着和他们一起玩，看看你能不能得到你想要的！

【讨论】：

【参考方案3】：

带有红色div 的row 将被黑色div 的高度向下推。

在同一 col-sm-7 div 中的蓝色 div 下方添加红色 div。

【讨论】：

不能。平板电脑/手机屏幕上 div 的堆叠顺序为蓝色 > 黑色 > 红色，这一点至关重要。你的方式会导致蓝色>红色>黑色。

以上是关于div有上下空白怎么消除的主要内容，如果未能解决你的问题，请参考以下文章