이미지와 테이블 사이에 설명 할 수없는 공간이 있습니다.

Question

안녕하세요!

내 웹 페이지 (www.tradecaptaincoaching.com)의 상단 이미지와 생성 된 테이블 사이에 설명 할 수없는 틈이 있습니다. 표는 http://www.tablesgenerator.com/html_tables#에 의해 생성되었습니다. 그것 위에서 하루 종일을 보내고 난 후에, 나는 미쳤던 차를 몰고있는 거대한 200 픽셀의 갈라진 틈을 제외하고 okay와 이미지를 얻었다.

Chrome에서 페이지를 검사하여 이상한 것을 볼 수 없습니다. 물론 나는 너무 초록색이어서 여전히 테이블을 사용하고 있으며 "CSS"에 대한 맞춤법을 찾아야합니다. ;)

코드는 다음과 같습니다. 그것의 바닐라 드루팔 (Drupal Fusion Starter Basic) 페이지. 내 나쁜 코딩 방법을 용서하십시오. 나는 아직도 배우고있다.

모든 지원과 학습이 가장 중요합니다.

감사합니다. 모든

<img style="padding-top: 20px" alt="Trade Captain Coaching Image" src="/images/LandingImageText.png" style="height:400px; width:960px" usemap="#menumap" /> 
<map name="menumap"> 
    <area shape="rect" coords="590,20,650,45" href="http://tradecaptaincoaching.com" alt="Home Page"> 
    <area shape="rect" coords="675,20,735,45" href="http://tradecaptaincoaching.com/about" alt="About Page"> 
    <area shape="rect" coords="760,20,830,45" href="http://tradecaptaincoaching.com/contact" alt="Contact Page"> 
    <area shape="rect" coords="855,20,935,45" href="http://tradecaptaincoaching.com/services" alt="Services Page"> 
</map> 
<style type="text/css"> 
.tg {border-collapse:separate;border-spacing:0;margin:0px auto;} 
.tg td{font-family:Arial, sans-serif;font-size:14px;border-style:none;overflow:hidden;word-break:normal;} 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:5px 20px;border-style:none;overflow:hidden;word-break:normal;} 
.tg .tg-cfld{font-size:13px;font-family:Verdana, Geneva, sans-serif !important;;color:#000064; padding:5px 20px;} 
.tg .tg-e9q7{font-weight:bold;font-size:14px;font-family:Verdana, Geneva, sans-serif !important;;background-color:rgb(116,196,218);color:#000064;line-height: 30px; padding: 0px 0px 0px 20px;} 
.tg .tg-031e{vertical-align:top;line-height: 20px; padding:5px 0px 23px 0px} 
</style> 
<table class="tg" style="undefined;table-layout: fixed; width: 960px"> 
<colgroup> 
<col style="width: 320px"> 
<col style="width: 320px"> 
<col style="width: 320px"> 
</colgroup> 
    <tr> 
    <th class="tg-e9q7">Choose Your Course</th> 
    <th class="tg-e9q7">Your Promotion</th> 
    <th class="tg-e9q7">Your Program</th> 
    </tr> 
    <tr> 
    <td class="tg-cfld">Text Here. </td> 
    <td class="tg-cfld">Text Here. </td> 
    <td class="tg-cfld">Text Here. </td> 
    </tr> 
<tr> 
    <td class="tg-031e" rowspan="4"><img src="/images/NoGold.png" style="height:300px; width:320px" /></td> 
    <td class="tg-031e"></td> 
    <td class="tg-031e"><img style="margin:0px auto;display:block" src="/images/ContactUs.png" style="height:30px; width:147px" /></td> 
    </tr> 
    <tr> 
    <td class="tg-e9q7" colspan="2">Your First Trade Here is FREE</td> 
    </tr> 
    <tr> 
    <td class="tg-cfld" colspan="2">Text Here. <br><br><br><br><br><br><br></td> 
    </tr> 
    <tr> 
    <td class="tg-031e"></td> 
    <td class="tg-031e"></td> 
    </tr> 
</table> 

Answer 1

첫째, 왜 HTML body에 style 블록은? 거기에 넣을 이유가 없습니다. 대신, head 블록에 넣으십시오.

두 번째로, 가리키고있는 페이지에서 <script> 블록 다음에 여러 개의 <br> 요소가 있습니다. 이 혼자 헤더 이미지와 테이블 사이의 불필요한 공간을 추가합니다 :

<br> 
<br> 
<br> 

마지막으로, 당신은 당신의 이미지 map 정의의 내부에 더 <br> 요소를 추가하고 있습니다. 거기에는 어떤 휴식도 있어서는 안됩니다. 블럭은 그 맥락에서 이해가되지 않기 때문에, 그들은 이미지 다음에 보이는 페이지의 흐름에 추가됩니다.

Answer 2

여러분의 도움과 통찰력에 감사드립니다. 마침내 코드에서 줄 바꿈을 모두 제거하여 문제를 해결했습니다. 이로 인해 코드가 사실상 읽을 수 없게됩니다. 그러나 CSS는 어쨌든 사실 거의 읽을 수 없습니다. 그래서 돌아 다니는 것은 주위에 온다.) 미스테리로 남아있는 나의 최고 이미지와 테이블 사이에는 여전히 작은 휴식이있다. 하지만 어느 한 CSS 문제에 8 시간 제한이 있으며이 한계를 훨씬 능가합니다.

성도 여러분, 다시 한번 감사드립니다! CA