표의 테두리 간격을 제거 할 수 없습니다

첨부 된 예제의 그림과 회색 영역을 함께 고집하고 싶습니다. 과은 같은 높이가 되겠지만, 이것을 파괴하는 테두리 간격을 제거 할 수 없습니다.표의 테두리 간격을 제거 할 수 없습니다

내가 뭘 잘못하고 있는지에 대한 아이디어가 있습니까? 지저분한 스타일 시트에 대해 유감스럽게 생각합니다.

PS :이이 DIV 년대에 의해 해결 될 수 알지만, 이것은 매우 독특한 환경을위한 것입니다.

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 

<style> 
    body { 
    background-color: #efefef; 
    border: 0px; 
    margin: 0px; 
    } 


    h1, h2, h3 { 
     color: #333333; 
     margin: 0px; 
     font-family: Verdana, Helvetica; 
    } 

    } 
    h1 {font-size: 21px;} 
    h2 {font-size:18px;font-weight:bold;} 
    h3 a {color: #0269cd; text-decoration: none; text-decoration: none;font-weight:bold;} 

    table.module{border-spacing:0!important;background-color: #ffffff;border-collapse: collapse;} 

    h3 {font-size: 16px;font-weight:normal;} 

    html,body{min-width:600px;} 

</style> 
</head> 
<body style="background-color: #efefef;"> 
<div style="padding-top:150px;padding-bottom:150px;background-color:white;"> 
<table width="600" height="242" align="center" border="0" cellspacing="0" cellpadding="0" class="module" > 
<tr> 
<td width="263" height="242" style="padding-left:30px;"><a href="http://www.cnn.com"> <img src="http://placekitten.com/263/242" width="263" height="242" alt="Module2_img"></a></td> 

<td width="277" height="242" align="left" style="padding-left:18px;background-color:#efefef;"> 
<h2>Content</h2><br> 
<h3>There should be a cute cat on the left <br><br> 
<a href="http://www.ikea.no/">Click this</a></h3> 


</td> 
</tr> 
</table> 
</div> 

</body> 
</html>

출처

2017-02-20 user977101

두 가지를 변경하여이 문제를 해결할 수있었습니다.

이미지를 오른쪽 열에 고정 시키려면 두 번째 셀 패딩을 18px에서 30px으로 늘려야합니다. 또는 각 셀의 너비를 동일하게 만들고 이미지를 오른쪽으로 떠올리게 할 수 있습니다.

이미지 아래에 여분의 패딩을 없애려면 영향을받는 이미지에 display: block;을 추가해야합니다. <img>은 인라인 요소이므로 텍스트와 같은 다른 요소를위한 공간을 만들기 위해 별도의 패딩이 추가됩니다.

이유가 무엇이든 display: block;을 사용할 수없는 경우 vertical-align: bottom;도 사용할 수 있습니다. 이렇게하면 이미지를 인라인으로 유지할 수 있으며 이미지의 세로 맞춤을 설정하여 테이블 셀의 맨 아래에 맞 춥니 다.

출처

2017-02-20 14:39:28

표의 테두리 간격을 제거 할 수 없습니다

답변

관련 문제