删除 HTML/CSS 中的空格答案

【问题标题】：Removing whitespaces in HTML/CSS删除 HTML/CSS 中的空格
【发布时间】：2013-07-07 19:45:09
【问题描述】：

我的网站几乎完成了，但是空白将我的元素从一个页面配置到另一个页面。

请点击here

Cross-border Airtime Transfer下面的空格比

本页here

我尝试用后者最小化空格，但没有一个起作用。

这是我的 comgtech.com/products1_1.php 代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" />

     <title>CTI | CORE PLATFORMS</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>
           <div >
        <?php include 'header.html' ?>

        <div style="text-align: center">
            <img src="images/cbat.jpg" style="width: 800px;" />

            <div style="width: 800px; margin:0 auto;" >
                <p style="margin-top: 0;">
                    <span style="float:left;" >
                        <img src="images/core-platforms.jpg" style="margin-right: 20px;"  />
                    </span>
                    <span style="float: right; " ><p style="text-align:left; font-size:13px; color:#333333" >
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te f eugait nulla facilisi. <br /><br />&#x2022; Cti.Loadwallet<br />&#x2022; Cti.MAS (Mobile Acquiring System)<br />&#x2022; Cti.Remit<br />&#x2022; Cti.SMS (Short Message Service)
                    </span>
            </p>

            </div> <br /><br />
            <div style="width: 800px; margin:0 auto; font-weight:bold; text-align: left;">
                               <a href="products1_1.php"  class="back-more"><font color="#00b1ef">&#60;back</font></a> 
                               <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <a href="products1_3.php"  class="back-more">know more&#62;</a>-->
                    </div>

        </div>


        </div>



               <?php include 'footer.html' ?>    
          </div>
</body>
</html>

【问题讨论】：

也许这会帮助stackoverflow.com/questions/5721966/…。至少使用 Chrome，您可以看到它应用于包含您的文本的 <p>。

标签： html css

【解决方案1】：

问题出在“跨境通话时间传输”图像后面的 HTML 标记中。

在第 #2 页中，在有一个元素之后，而在第 2 页中有一个元素。

table 的 display 是 table，而 div 的 display 是 block。

块元素的一个属性是它在它之前和之后创建一个换行符。

阅读更多here

要修复它，请给 div 一个负的上边距 CSS 属性：margin-top: -13px;

这样做之后，我注意到页脚比以前高了一点，所以如果你想降低它，请给div 和251px 相同的height。

干杯:)

【讨论】：

我设置了comgtech.com/products1_1.php div 的高度，页脚向上，扭曲。 :(