html - Html 表格列内的 div 之间不需要的间距

Question

我无法消除在“ArticlesBar”列中的 HTML 表格中呈现的每个 div 之间的空格。在本列中，我有一个用于滚动条的 div，还有另外 3 个用于标题正文和新闻文章日期的 div。在每个 div 之间我都有一个间距。关于如何删除它有什么想法吗？

这个 fiddle 会有所帮助:http://jsfiddle.net/3TseC/ 请检查 fiddle 的左栏 HTML 代码:

<table class="homepage_table">
    <tr>
        <td id="Articlesbar" width="20%">
            <div width="20%">
                <%@include file="newsData.jsp" %>
            </div>
        </td>


        <td id="about_td" width="80%">
            <div class="fadein">
                <img src="imp.gif">
                <img src="http://thefinancialbrand.com/wp-content/uploads/2008/08/tagline-tagcloud.gif">
                <img src="slogan1.gif">

            </div>

            <div id="about_text" width="100%" height="100px">
                Founded in 1992 as a Finance and Securities Company,
                Imperia Bank converted into a fully fledged commercial bank in January 1996.
                Since then the bank has had a long standing tradition of achieving strong financial performance and carrying out
                expansion strategies while successfully focusing on efficient client service delivery.<br><br>
                Over the last 20 years, Imperia Bank has achieved a sustained growth in our customer deposit base which is largely attributed to the level of confidence our customers have in the bank and our corporate strategy.
                Currently we have 23 branches in our expanding branch network across major towns and cities.<br><br>
                Imperial Bank will continue to enhance the existing risk management parameters through the effective use of our newly installed and cutting edge core banking system.
                As part of our growth strategy, we are also continuing to recruit qualified professional staff, and providing appropriate training to our existing human resources to ensure we continue to meet evolving customer demands.
            </div>
        </td>
    </tr>
</table>

另一个html(从jsp文件导入，我实际上使用从MySql导入的数据，但为了显示问题，我在id div中使用常规文本):

<div id= "newsHeader">this is a header</div>
<div id = "newsBody">this is the body</div>
<div id = "newsDate">this is the date</div>

CSS 代码:

.homepage_table {
    border: 250;
    width: 100%;
    height: 600px;
    margin: auto;
}

.homepage_table td {
    border: 0;
}

#about_td {
    background-image: url('http://www.promenadd.com/en/wp-content/uploads/2013/04/promenadd_grey_background.jpg');
    background-repeat: no-repeat;
    background-size: 110%;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-weight: bold;
}

#about_text {
    padding-right: 50px;
    padding-left: 50px;
    color: steelblue;
}

#Articlesbar {
    height: 50px;
}

#Articlesbar div {
    overflow-y: scroll;
    height: 100%;
    margin: 0;
}

#newsHeader {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    color: steelblue;
    font-weight: bold;
    font-size: 20px;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    height: 20px;
    margin: 0;
}

#newsBody {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    color: red;
    font-size: 14px;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    margin: 0;
    height: 20px;
}

#newsDate {
    margin: 0;
    width: 100%;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 14px;
    padding-right: 10px;
    padding-left: 10px;
    height: 20px;
}

Answer 1

当然不用担心

如果我正确地假设您不希望

之间有巨大的空白，那么您需要做的就是

<div id= "newsHeader">this is a header</div>
<div id = "newsBody">this is the body</div>
<div id = "newsDate">this is the date</div>

elements是替代css选择器

#Articlesbar div

与

#Articlesbar > div

这个选择器意味着只有#Articlesbar的直系后代才会获得该样式的属性。

就目前情况而言，其他三个 div 的高度也设置为 100%。

re-re updated fiddle