CSS HTML figure padding

I am trying to use CSS and HTML to insert an image into a webpage.

I have the following on CSS:

#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
padding-top:475px;
}

and in my HTML, I have:

<div id="maintext"> 
<p> my 开发者_开发问答page </p>
</div>
<div id="eDTP"></div>

Although this works, I have a big white space on the top and bottom of the images, which I do not want. I tried adjusting the padding values, but that does not seem to really help.

Could anyone please point me in the right direction to get rid of these white spaces?

I would remove the padding top. That should eliminate the problem. I'm not sure why you would need such a high amount of padding between them.

EDIT - Just read that you say the padding hasn't helped you. Any chance of a link to the url? Or a live example somewhere to see the issue in more detail?

Make sure that the line-height of the figure or surrounding element is set to line-height:1;

The only size that you have specified is the padding. The size of a background image doesn't affect the size of the element. You should remove the padding, and specify width and height for the element so that it's the same size as the image.

Unfortenately there is no way to do that in HTML/CSS. Only way of doing this is inserting the values on your server or client-side by javascript. You should really do it with <img> tags inside your <div> element like so.

Make sure you point to the right location of the image you want to show relevent to folder where it is being called.

http://jsfiddle.net/gKFAT/

Here you try to show an image as a background for a div. Is there really strong reason not to use html like above?

<div id="maintext"> 
<p> my page </p>
</div>
<div id="eDTP">
  <img src="eDTP.png">
</div>

If so, you need to specify the dimentions of your di, 'cause it doesn't auto fit the background size (no surprise here, I think).

Try

#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
width: 120px; //background image width here
height: 150px; // and height here
}

Your biggest problem is width and height. Also, how do you want this image displayed? Do you want it below the text, on the side of the text, etc? In modern browsers, a div is fully collapsed, and its height is equal to 0. Its width, by default, is 100%. IE7 and older does not work this way for the height.

You need to specify, not padding, but width and height for your div container, eDTP, that is, if you wish to have the background image added via CSS. If you wish to have an image populate eDTP using the img tag, then you do not have to specify the height.

By the way, the reason you see your image with the padding is based on something called the box model. Padding extends the visible region of background color, a background image, and others. The padding you have is functioning like you have a height assigned to its container. But as I said before, this is a very bad way to do this. Add this to your eDTP declaration:

#eDTP {
background: url(eDTP.png) no-repeat center;
width:500px; /* Change this value to the width of your image */
height:475px;/* I assume this is the height of your image */
}