Toggle Squares 페이지에서 JavaScript로 생성 된 모든 셀에 < img/>의 표가 있습니다. 다음 CSS를 적용했습니다 :CSS 문제 : <table> 이미지를 세로로 터치하여 이미지를 만드는 방법은 무엇입니까?
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
}
모든 간격을 제거하기 위해. 그러나 이제 두 개의 인접한 행 사이에 간격이 얇은 배경 선이 나타납니다. 어떻게 제거 할 수 있습니까?
페이지가 유효한 XHTML + CSS입니다.
도움 주셔서 감사합니다.
감사합니다,
.game td img {
display: block;
}
이미지에는 자체 공백이 있습니다.
추가의 cellpadding = "0"과 cellspacing는 = "0"
border-collapse 및 border-width 속성을 CSS에 추가했지만 여전히 작동하지 않습니다. (Firefox 3.0.x). –
cellpadding 및 cellspacing 속성은 무엇입니까? –
고정 .. 테이블에 속성 또는 CSS에서
border-collapse: collapse;
border-width: 0;
사용하려고 :
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
vertical-align: middle;
}
이것이 나에게 맞는 것 같습니다 – Brabster
I
<html>
<head>
<style>
td { margin 0px; padding: 0px;}
table { border-collapse:collapse;}
</style>
</head>
<body>
<table>
<thead />
<tbody>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
</tbody>
</table>
</body>
:
이코드는 바로 옆에 서로 선적 지시 밖에 해줄 수없는 공간 사각형을 형성에 네 개의 고체 색깔의 사진과 묘사 : 다음 코드를 찾고있는 효과를 얻을 수 있었다 문제는 인라인 이미지가 이미지의 ascent = height 및 font의 descent = descent 인 문자로 처리된다는 것입니다. 즉, 이미지 만 포함하는 표 셀의 높이가 이미지 높이보다 큽니다.
가장 간단한 방법은 전체 표의 줄 높이를 0으로 설정하여 텍스트 줄의 강하를 억제하거나 모든 이미지의 display : block을 설정하여 인라인 서식 지정 컨텍스트에서 블록 서식 지정 컨텍스트로 이동시키는 것입니다 .
고마워요! 그것은 트릭을했다. –