このレイアウトでテキストの高さを調整する方法を教えてください。ありがとうございます。 _html/css_WEB-ITnose

専門家の皆様、おはようございます！

以下のようなページレイアウトの作り方を学びました

赤丸と緑丸のテキストの高さの距離と、上下からの高さの距離を調整する方法を教えてください。いつも設定を間違えてしまいました。赤い丸がレイアウトに表示されます。緑の丸内のテキストは互いに大きく異なり、上下の端からも離れています。専門家の方、アドバイスありがとうございます。

コードは次のとおりです:

<style type="text/css"><!-- .highlightit img{border: 1px solid #ccc;}.highlightit:hover img{border: 1px solid #1D9CC1;}.highlightit:hover{border: 1px;color:#1D9CC1; }//--></style><table width="50%" border="0">  <tr>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></p><p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></p></div><p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></p><p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></p></div><p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></p><p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></p></div><p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></p><p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></p></div><p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>  </tr>  <tr>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></p><p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></p></div><p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></p><p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></p></div><p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></p><p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></p></div><p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></p><p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></p></div><p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>  </tr></table>

ディスカッションに返信 (解決策)

080b747a20f9163200dd0a7d304ba388

4129c9f50770f3b9d929254e67d3e0d1

531ac245ce3e4fe3d50054a55f265927


p h4 および他のタグにはデフォルトのマージンがあるため、ここでリセットする必要があります

<style type="text/css"><!-- .highlightit img{border: 1px solid #ccc;}.highlightit:hover img{border: 1px solid #1D9CC1;}.highlightit:hover{border: 1px;color:#1D9CC1; }h4 {	margin: 5px 0px;}//--></style><table width="50%" border="0">  <tr>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><div style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></div><div style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></div></div><div><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></div><div style="color:#666; font-size: 13px;">感动感激感谢</div></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><div style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></div><div style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></div></div><div><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></div><div style="color:#666; font-size: 13px;">感动感激感谢</div></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><div style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></div><div style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></div></div><div><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></div><div style="color:#666; font-size: 13px;">感动感激感谢</div></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><div style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></div><div style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></div></div><div><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></div><div style="color:#666; font-size: 13px;">感动感激感谢</div></td>  </tr>  <tr>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><div style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></div><div style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></div></div><div><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></div><div style="color:#666; font-size: 13px;">感动感激感谢</div></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><div style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></div><div style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></div></div><div><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></div><div style="color:#666; font-size: 13px;">感动感激感谢</div></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><div style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></div><div style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></div></div><div><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></div><div style="color:#666; font-size: 13px;">感动感激感谢</div></td>    <td><div style="position:relative"><a href="http://www.kanCBA.Com" class="highlightit"  target="_blank"><img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森"  /> </a><div style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;"><div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div></div><div style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;"><div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div></div></div><div><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></div><div style="color:#666; font-size: 13px;">感动感激感谢</div></td>  </tr></table>

p タグを変更します。このように p タグを h でネストすることはできません。H4 にはデフォルトのマージンが生成されます。

HTML コード

8d2c2a8eff5035fb68199fd4e653ca2c

68ccb177a5de0ef9542dde7d35bae727

このコードに *{padding:0; margin:0;}

上下の距離を調整 p{ line-height:24px;}

lengthitudinal-align を使用します...?

アドバイスをくださった専門家に感謝します、ありがとう！