Please tell me how to adjust the height of the text in this layout, thank you! _html/css

Dear experts, good morning!

I learned to make a page layout as follows,

Please tell me how to adjust the height distance between the text in the red circle and the green circle and the height distance from the top and bottom. I always The setting is not good. When typesetting, the text in the red circle and the green circle are very different from each other, and they are also far apart from the upper and lower edges. Thank you for the advice, experts!

The code is as follows:

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

Copy after login

Reply to discussion (solution)

p Tags such as h4 have default margins. You need to reset them here

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

Copy after login

Replace the p tag with a div. The p tag cannot be nested with h like this, as it will generate redundant p Tags come, h4 will have default margin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"><!--.highlightit{ width:120px; height:162px; overflow:hidden; display:block;}.highlightit img {	border: 1px solid #ccc; display:block;}.highlightit:hover img {	border: 1px solid #1D9CC1;}.highlightit:hover {	border: 1px;	color:#1D9CC1;}p{ line-height:12px;}//--></style></head><body><table width="50%" border="0" cellpadding="0" cellspacing="0" >  <tr>    <td valign="top"><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>            <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>        <p>      <a href="/movie/story/10659-4991.html" title="桃姐" target="_blank">      桃姐      </a>      </p>      <p style="color:#666; font-size: 13px;">感动感激感谢</p>      </div>    </td>    </tr></table></body></html>

Copy after login

Your writing is too messy, many tags are not used!

HTML code

This code adds *{ padding:0; margin:0;}
to adjust the upper and lower distance p{ line-height:24px;}

Use verbal-align for this...?

Thanks to the experts for their advice, thank you!