请问如何调节这个布局的文字上下高度，谢谢！_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 12:08:42

1496人浏览过

来源于php中文网

原创

各位高手，早上好！

本人学习着制作了一个如下的页面布局，

请问如何调节红圈和绿圈中的文字之间的高度距离以及与上下边的高度距离，我老是设置不好，排版出来红圈和绿圈中的文字互相差离的很开，并且它们与上下边也拉得很开，谢谢高手们指点！

代码如下：

<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"    style="max-width:90%" 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/2709" title="一点PPT"><img
                                                                                src="https://img.php.cn/upload/ai_manual/001/246/273/177310570147998.png" alt="一点PPT"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2709" title="一点PPT">一点PPT</a>
                                                                        <p>一句话生成专业PPT，AI自动排版配图</p>
                                                                </div>
                                                                <a href="/ai/2709" title="一点PPT" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><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"    style="max-width:90%" 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</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"    style="max-width:90%" 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</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"    style="max-width:90%" 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</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"    style="max-width:90%" 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</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"    style="max-width:90%" 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</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"    style="max-width:90%" 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</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"    style="max-width:90%" 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p style="color:#666; font-size: 13px;">感动感激感谢</p></td>  </tr></table>

回复讨论(解决方案)

p h4 等标签有默认的margin, 这里得重置一下

<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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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标签换成div吧，p标签不能这样和h嵌套，会生成多余的p标签来，h4会有默认的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"    style="max-width:90%" 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>

你写的太乱了，好多标签是不用的！

HTML code

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这个代码加上*{ padding:0; margin:0;}
调节上下距离 p{ line-height:24px;}

用veritical-align这个……？

感谢高手们的指点，谢谢！