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

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

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

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

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

<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>

ログイン後にコピー

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

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 コード

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

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

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

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