如何摆脱2个html表之间的额外空间？

时间：2014-09-02 17:00:08

标签： html css space

我有2个html表，在源html文件中，它们之间只有一行，但在浏览器中有一个很大的空间，我看着css，那里没有关于表的内容，如何摆脱额外的空间？

enter image description here

这是css文件：

/*
 * GENERICS
 */ 
body {
    background-repeat:repeat-x;
    padding:4px;
    padding-top:0px;
    margin:0px;
}


/*
 *   TOP LEVEL
 */ 
.pageTitle {
    color:#000000;
    font-family:century gothic;
    font-size:22px;
    font-weight:bold;
    line-height:22px;
    vertical-align:bottom;
    border-bottom:solid;
    border-bottom-width:3px;
    border-bottom-color:#0099cc;
}


.topLevelTitleNoLine {
    padding:0px;
    vertical-align:bottom;
    height:35px;
    color:#000000;
    font-family:century gothic;
    font-size:18px;
    font-weight:bold;
}

.topLevelTitle {
    padding:0px;
    vertical-align:bottom;
    height:35px;
    color:#000000;
    font-family:century gothic;
    font-size:18px;
    font-weight:bold;
    border-bottom:solid;
    border-bottom-width:3px;
    border-color:#0099cc;
}


.topLevelSubTitle {
    padding:0px;
    vertical-align:bottom;
    color:#000000;
    font-family:century gothic;
    font-size:16px;
    font-weight:bold;
    border-bottom:solid;
    border-bottom-width:3px;
    border-color:#0099cc;
}

.topLevelSubTitleSmall {
    padding:0px;
    vertical-align:bottom;
    color:#000000;
    font-family:century gothic;
    font-size:11px;
    font-weight:bold;
    border-bottom:solid;
    border-bottom-width:3px;
    border-color:#0099cc;
}

.topHeader {
    background-color:#003366;
    text-align:right;
    vertical-align:bottom;
    color:#ffffff;
}

.topStatus {
        font-family:arial,helvetica,sans-serif;
        font-weight:bold;
        font-size:16px;
        border-bottom: 3px solid #000000;
        color:#00000;
        padding:3px;
        margin:0px;
}


.topnavItem {
        font-family:arial,helvetica,sans-serif;
        font-weight:bold;
        font-size:10px;
        border-bottom: 3px solid #000000;
        color:#ffffff;
        padding:3px;
        text-align: right;
}


.headerCompanyL {
    width:190px;
    text-align:left;
    background-color:#003366;
}


.headerCompanyR {
    width:190px;
    text-align:right;
    background-color:#003366;
}


.headerclient {
    font-family:arial,times,helvetica,sans-serif;
    font-size:15px;
    color:#FFFFFF;
    text-align:left;
    background-color:#003366;
    padding-top:3px;
    padding-bottom:3px;
}


td.footerMsg {
    font-family:arial,helvetica,sans-serif;
    font-size:10px;
    text-align:center;
    line-height:28px;
    color:#999999;
    border-top:solid;
    border-width:1px;
    border-color:#999999;
}


a.footerMsg {
    color:#999999;
    text-decoration:none;
}


a.footerMsg:hover {
    color:#cc0000;
    text-decoration:underline;
}




/*
 *  NAVIGATION
 */ 
a.screensNavItem:link {
    font-size:12px;
    text-decoration:none;
    color:#003366;
}


a.screensNavItem:visited{
    font-size:12px;
    text-decoration:none;
    color:#003366;
}


a.screensNavItem:hover{
    font-size:12px;
    text-decoration:none;
    color:#003366;
}


.screensnavCurrent {
    font-size:12px;
    font-weight:bold;
    text-decoration:none;
    color:#003366;
    background-color:#cccccc;
}




/*
 *   DISPLAY DATA
 */
.displayHeaderCell {
    font-weight:bold;
    font-family:arial,sans-serif;
    font-size:11px;
}

.listTable {
    font-family:arial,sans-serif;
    font-size:11px;
    color:#000000;
    padding:3px;
}

.pageinfotitle {
    font-weight:bold;
    font-size: 11px;
    color:#000000;
    padding:3px;
    background-image:url(background.nav.gif);
    border:solid;
    border-width:1px;
    border-color:#999999;
    border-bottom-color:#000000;
    border-bottom-width:3px;
    vertical-align:bottom;
}
.pageinfotitlered {
    font-weight:bold;
    font-size: 11px;
    color:#FF0000;
    padding:3px;
    background-image:url(background.nav.gif);
    border:solid;
    border-width:1px;
    border-color:#999999;
    border-bottom-color:#000000;
    border-bottom-width:3px;
    vertical-align:bottom;
}

.pageinfotitleClear {
    font-weight:bold;
    font-size: 11px;
    color:#000000;
    padding:0px;
    border:none;
    border-width:0px;
    background: transparent;
    vertical-align:left;
    text-align:right;
}

.pageinfo {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
}

.pageinfolink {
    font-weight:bold;
    font-size: 16px;
    color:#000000;
    padding:3px;
    background-image:url(background.nav.gif);
    border:solid;
    border-width:1px;
    border-color:#999999;
    border-bottom-color:#000000;
    border-bottom-width:3px;
    vertical-align:bottom;
}

.displayCategory {
    font-weight:bold;
    color:#000000;
    font-size:12px;
}

.displayCategorySmall {
    font-weight:bold;
    color:#000000;
    font-size:10px;
}

.displayLargeFont {
    font-weight:normal;
    font-family:arial,sans-serif;
    font-size:14px;
}

.displayRedHint {
        font-family:arial,helvetica,sans-serif;
        font-weight:bold;
        font-size:12px;
        color:#FF0000;
        padding:3px;
        margin:0px;
}

.displayEndDate {
    background-color: transparent;
    border-top: transparent;
    border-right:  transparent;
    border-bottom: transparent;
    border-left: transparent;
    width: 60px;
    height: 20px;
    font-size:11px;
    word-wrap: break-word;
    padding-bottom: 60%;
}

.displayAmount {
    background-color: transparent;
    border-top: transparent;
    border-right:  transparent;
    border-bottom: transparent;
    border-left: transparent;
    width: 60px;
    height: 20px;
    font-size:11px;
    word-wrap: break-word;
    padding-bottom: 60%;
    padding-left: 50%;
}

.processTextDisplayLabel {
    background-color: transparent;
    border-top: transparent;
    border-right:  transparent;
    border-bottom: transparent;
    border-left: transparent;
    font-size:14px;
    word-wrap: break-word;
    padding-bottom: 60%;
}

.formUWButtons {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#ffffff;
    color:#000000;
    width:70px;
}

.formAddButtons {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#cccccc;
    color:#000000;
    width:50px;
}

.processTextDisplayLabel {
    background-color: transparent;
    border-top: transparent;
    border-right:  transparent;
    border-bottom: transparent;
    border-left: transparent;
    font-size:14px;
    word-wrap: break-word;
    padding-bottom: 60%;
}

.processTextSmallLabel {
    background-color: transparent;
    border-top: transparent;
    border-right:  transparent;
    border-bottom: transparent;
    border-left: transparent;
    font-size:11px;
    word-wrap: break-word;
    padding-bottom: 60%;
    width: 190px;
}


/*
 * FORMS
 */
.processTable {
    font-family:arial,sans-serif;
    padding:3px;
    font-size:11px;
    color:#000000;
    border:solid;
    border-width:1px;
    border-color:#000000;
    background-color:#dfdfdf;
}


.processRegular {
    text-decoration:none;
    color:#000000;
    font-size:12px;
}

.processRegularSmall {
    text-decoration:none;
    color:#000000;
    font-size:11px;
}

.processRequire {
    font-weight:bold;
    text-decoration:none;
    color:#000000;
    font-size:12px;
}

.processError {
    font-weight:bold;
    text-decoration:none;
    color:#ff0000;
    font-size:12px;
}

.processTextLabel {
    text-decoration:none;
    color:#000000;
    font-weight:bold;
    font-size:12px;
} 

.processMsgError {
        font-family:arial,helvetica,sans-serif;
        font-weight:bold;
        font-size:14px;
        color:#990033;
        padding:3px;
        margin:5px;
}

.processLargeHeaderText {
    font-weight:bold;
    font-size: 16px;
    color:#000001;
    padding:3px;
    background-image:url(background.nav.gif);
    border:solid;
    border-width:2px;
    border-color:#999999;
    border-bottom-color:#000000;
    border-bottom-width:3px;
    vertical-align:bottom;
} 

.processDisabledText {
    text-decoration:none;
    color:#c0c0c0;
    font-size:12px;
}

.processText {
    font-family:arial,sans-serif;bodyIframe
    font-size:11px;
    color:#000000;
    border:solid;
    border-width:1px;
    border-color:#000000;
    padding-left:5px;
    padding-right:5px;
}

.processTextAlt {
    font-family:arial,sans-serif;
    text-decoration:none;
    color:#000000;
    font-size:11px;
}

.processBaseItem {
    padding:2px;
    padding-top:3px;
    font-size:11px;
}

.processBaseItemSmall {
    padding:2px;
    padding-top:3px;
    font-size:9px;
}


 .processSelect {
    font-family:arial,sans-serif;
    font-size:11px;
    color:#000000;
}
.processSelectClear {
    font-family:arial,sans-serif;
    font-size:11px;
    color:#000000;
    padding:0px;
    border:none;
    border-width:0px;
    background: transparent;
}

 .processSelectFixed {
    font-family:arial,sans-serif;
    font-size:11px;
    color:#000000;
    width:100px;
 }

.processSelectSmall {
    font-family:arial,sans-serif;
    font-size:9px;
    color:#000000;
}

.processBaseButton {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#cccccc;
    color:#000000;
    width:100px;
}

.processBaseFrame {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#cccccc;
    color:#000000;
}

.processSubmit {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#cccccc;
    color:#000000;
    width:90px;
}

.processSubmitRed {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#cccccc;
    color:#FF0000;
    width:90px;
}

.processLabel {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#dfdfdf;
    color:#000000;
    border:none;
    text-align:right;
    width:60px;
}

.processReadOnly {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#cccccc;
    border:none;
    text-align:right;
}


.processMSRCalc {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#cccccc;

    border:solid ;
    border-width: thin;
    text-align:right;
}

.processMSRCalcTotal {
    font-family:arial,sans-serif;
    font-size:11px;
    font-weight:bold;
    background-color:#FFFFFF;
    border:solid ;
    border-width: thin;
    text-align:right;
}

.processBlankRow {
    font-family:arial,sans-serif;
    font-size:6px;
    background-color:#DFDFDF;
    border:none;
    text-align:right;
}


/*
 *  NEWS
 */
.newsBasePageTitle {
    padding:0px;
    vertical-align:bottom;
    height:35px;
    color:#000000;
    font-family:century gothic;
    font-size:18px;
    font-weight:bold;
    border-bottom:solid;
    border-bottom-width:3px;
    border-color:#0099cc;

}

.newsBaseTitle {
    padding:0px;
    vertical-align:bottom;
    color:#000000;
    font-family:century gothic;
    font-size:15px;
    font-weight:bold;
    border-bottom:solid;
    border-bottom-width:1px;
    border-color:#0099cc;
}

.newsBaseText {
    text-decoration:none;
    color:#000000;
    font-size:14px;
}    

.newsBaseTextAlt {
    padding:0px;
    vertical-align:bottom;
    color:#000000;
    font-size:14px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-color:#0099cc;
}



/*
 * STATUS
 */
.statusStyleSearchResult {
        padding: 3px;
        line-height: 18px;
}

.statusStyleSearchResult TD {
        padding: 3px;
        color: black;
        font: 11px Arial, Helvetica, Sans-Serif;
        border-bottom: 1px solid black;
}

.statusStyleNew {
        background-color: #8AC5ff;
}

.statusStyleFrozen {
        background-color: #E70000;
}

.statusStyleFuture {
        background-color: #FFAAFF;
}

.statusStyleExpired {
        background-color: #EB66D3;
}

.statusStylePending {
        background-color: #FFE4B0;
}

.statusStyleApproved {
        background-color: #99ffcc;
}

.statusStyleMoreInfo {
        background-color: #ffff99;
}

.statusStyleEdit {
        background-color: #8AC5ff;
}

.statusStyleExclusive {
        background-color: #8AC5ff;
}

.statusStyleDeclined {
        background-color: #ffcccc;
}

.statusStylePresented {
        background-color: #00ffff;
}

.statusStyleBound {
        background-color: #00ff99;
}

.statusStyleBoundOther {
        background-color: white;
}

.statusStyleClosed {
        background-color: #E0E0E0;
}

.statusStylePreScreened {
        background-color: #FF6600;
}

.statusStyleCancelled {
        background-color: #ff9999;
}

.statusStypePendingEndorsement {
        background-color: #CC99FF;
}

.statusStyleSuspend {
        background-color: #FFE4B0;        
}

.statusStylePendingRenewal {
        background-color: #99FF33;        
}

.newType {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
        background-color:#8AC5ff;
}

.pendingType {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
        background-color:#FFE4B0;
}

.more-informationType {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
        background-color:#ffff99;
}

.approvedType {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
        background-color:#99ffcc;
}

.declinedType {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
        background-color:#ffcccc
}

.pending-endorsementType {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
        background-color:#cc99ff
}

.boundType {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
        background-color:#00ff99
}

.presentedType {
        font-family:arial,helvetica,sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
        border-bottom: 1px solid #000000;
        padding:3px;
        background-color:#00ffff
}




/*
 * ERRORS
 */ 
.errorLogon {
    text-decoration:none;
    color:#ff0000;
    font-size:12px;
}

.exceptionType {
    font: 10px lucida console;
    color: black;
    border: 1px solid black;
    padding:3px;
}

.exceptionType TH {
    background: silver;
}

.exceptionType TD {
    background: white;
}




/*
 * GENERAL
 */

.spacer {
    padding:0px;
    font-size:1px;
}

.centerBlock {
    vertical-align:middle;
}

.fieldBase {   
    font-size: 11px;
    color:#000000;
    padding:0px;
    background-color:#dfdfdf;
    border:solid;
    border-width:1px;
    border-color:#dfdfdf;
    border-bottom-width:3px;
    vertical-align:bottom;
}    

.fieldBaseR {
    font-family:arial,sans-serif;
    font-size:11px;
    color:#000000;
    border:solid;
    border-width:1px;
    border-color:#000000;
    padding-left:0px;
    padding-right:1px;
    text-align:right;
}    

.fieldBaseL {
    font-family:arial,sans-serif;
    font-size:11px;
    color:#000000;
    border:solid;
    border-width:1px;
    border-color:#000000;
    padding-left:0px;
    padding-right:1px;
    text-align:left;
}

.emailLabel {
    text-decoration:none;
    color:#000000;
    font-weight:bold;
    font-size:12px;
    width:230px;
}

td.copyright {
    font-family:arial,helvetica,sans-serif;
    font-size:10px;
    text-align:center;
    line-height:28px;
    color:#999999;
    border-width:1px;
    border-color:#999999;
}

3 个答案:

答案 0 :(得分：0)

您可以从CSS重置中获益。添加到css文件的顶部（在body {}声明之前）：

* {margin: 0; padding: 0;}

请注意CSS重置将删除所有默认边距/填充。您需要在合适时手动添加它们。如需更少的通用重置，请尝试：

table {margin: 0; padding: 0;}

答案 1 :(得分：0)

我喜欢使用一种工具来解决这样的问题，该工具在DOM中鼠标悬停时突出显示渲染的元素。有许多，但Chrome的开发人员工具内置了一个。右键单击空格和“Inspect Element”。

然后你就会知道哪个元素的盒子模型包含空格，你不需要采用试错法。

答案 2 :(得分：0)

在css中添加：br {display：none; }

相关问题
最新问题