2 html 테이블 사이에 여분의 공간을 제거하는 방법은 무엇입니까?

Question

나는 2 html 테이블을 가지고 있는데, 소스 HTML 파일은 거기에 단 한 줄 밖에 없다.하지만 브라우저에 큰 공간이있다. 나는 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; 
} 

Answer 1

당신은 CSS 리셋의 이익을 얻을 수 : 여기

는 CSS 파일입니다. 합니다 ( body {} 선언하기 전에) CSS 파일의 상단에 추가

* {margin: 0; padding: 0;} 

모든 기본 여백/패딩을 제거 할 CSS 리셋을 유의하시기 바랍니다. 적합한 경우 수동으로 추가해야합니다. 덜 일반적인 다시 들어보십시오 :

table {margin: 0; padding: 0;} 

Answer 2

내가 DOM에서 당신이 그들을 마우스 오버로 렌더링 된 요소를 강조하는 도구와 같은 문제를 해결하는 것을 좋아합니다. 많은 것이 있지만 Chrome의 개발자 도구에 내장되어 있습니다. 공간을 오른쪽 클릭하고 "Inspect Element"를 클릭하십시오.

그러면 어떤 요소의 상자 모델에 공간이 포함되어 있는지 알 수 있으므로 시행 착오를 평가할 필요가 없습니다.

Answer 3

대부분의 웹 브라우저에는 기본 여백 및 패딩에 대한 기본 설정이 다릅니다. 그래서 이것을 해결하는 가장 좋은 방법은 모든 여백과 패딩을 설정하는 것입니다.

*{ 
    margin:0; 
    padding:0; 
} 

Or 
html,body { 
    margin:0; 
    padding:0; 
} 

Answer 4

css에서 add : br {display : none; }