Gaps between an img & a div
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"开发者_JAVA百科><!-- 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>
The spaces are caused by the P tags' margins pushing the IMG tags away. Because of the way CSS works, the DIV's background doesn't cover the paragraphs' margins unless you set a border on it. If you add the code
div { border: 1px solid red; }
to your CSS, the you can see the DIV actually touches the IMG exactly.
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
It is because of browsers default margins on your <p> tags. You can see that if you add something like p{ margin: 0px; } to you css, the image touches the divs, but your text is also "squished" together
As it involves images, it will be hard for me to re-produce the issue. Though try the following:
Remove newline (and or spaces) between IMG and DIV tags, like the following:
<img class="pageBoxTop" src="images/pageBoxTop.png" alt=""/><div class="pageBoxContent">
div is a block level element. That means a div will always be in a new line of its own. If you want to put your div element in the line of another element, make your div inline.
div {
display:inline;
}
加载中,请稍侯......
精彩评论