img&一个div [英] Gaps between an img & a div
问题描述
我的问题：
我的div包含一个img元素，然后直接在下面是div元素，然后在下面是另一个img元素。任何这些要素之间不应有纵向差距。但是会发生什么是中间div与中间div之间存在10 / 20px的垂直间隙。 imgs（在顶部和底部）。
我如何消除内部div& 2个img元素？
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml><！ - InstanceBegin template =/ Templates / homepage.dwtcodeOutsideHTMLIsLocked =false - > ;
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< style type =text / css>
/ *特定测试* /
/ *执行CSS重设* /
html，body，div，form，字段集，图例，标签，img {margin：0;填充：0; } table {border-collapse：collapse; border-spacing：0; } th，td {text-align：left; } h1，h2，h3，h4，h5，h6，th，td，caption {font-weight：normal; } img {border：0; }
.pageBox {width：700px;显示：块; }
.pageBoxContent {background：url（images / pageBoxMid.png）repeat-y;背景颜色：红色;
padding-right：50px; padding-left：50px;宽度：700px; }
.pageBoxContent p {font-family：Calibri，Myriad Pro，Serif; }
.pageBoxTop {background-color：blue; }
.pageBoxBottom {background-color：blue; }
- >
< / style>
< / head>
< body>
< div>
< div class =pageBox>
< img class =pageBoxTopsrc =images / pageBoxTop.pngalt =/>
<！ - 显示屏上出现间隙 - >
< div class =pageBoxContent>
< p class =subHeading>近期活动< / p>
< p> abcedefdfdgdf< / p>
< p> abcedefdfdgdf< / p>
< p> abcedefdfdgdf< / p>
< p> abcedefdfdgdf< / p>
< / div>
<！ - 显示屏上出现间隙 - >
< img class =pageBoxBottomsrc =images / pageBoxBottom.pngalt =/>
< / div>
< br />
< br />
< / div>
< / body>
< / html>
.pageBoxContent p {font-family ：Calibri，Myriad Pro，Serif; margin：0; //调整它}
如果你想在p中有一些空隙，你可以设置第一个和最后一个只有像 p：first& p：last
I have div that contains a img element then directly below that is a div element then below that is another img element.
My Problem: there should be no vertical gaps between any of those elements. But what happens is that there is a 10/20px vertical gap between the middle div & the imgs(on top & bottom).
How do I remove the vertical gap between the inner div & the 2 img elements?
<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
/* Test Specific */
/*Perform CSS Reset*/
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
.pageBox { width: 700px; display: block; }
.pageBoxContent { background: url("images/pageBoxMid.png") repeat-y; background-color: red;
padding-right: 50px; padding-left: 50px; width: 700px; }
.pageBoxContent p { font-family:Calibri, "Myriad Pro", Serif; }
.pageBoxTop { background-color: blue; }
.pageBoxBottom { background-color: blue; }
-->
</style>
</head>
<body>
<div>
<div class="pageBox">
<img class="pageBoxTop" src="images/pageBoxTop.png" alt=""/>
<!-- Gap appears here on display -->
<div class="pageBoxContent">
<p class="subHeading">Upcoming Events</p>
<p>abcedefdfdgdf</p>
<p>abcedefdfdgdf</p>
<p>abcedefdfdgdf</p>
<p>abcedefdfdgdf</p>
</div>
<!-- Gap appears here on display -->
<img class="pageBoxBottom" src="images/pageBoxBottom.png" alt=""/>
</div>
<br/>
<br/>
</div>
</body>
</html>
Set the margin for the Paragraph inside the div.Since P has a default margin you have to clear that first or set that to your desired value.
.pageBoxContent p{ font-family:Calibri,"Myriad Pro", Serif; margin:0;//adjust it}
If you want some gap inside p , you can set the first and last only like p:first & p:last
这篇关于img&一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
