How to get rid of white space around an element?

问题

SUMMARY: an embed with 100% width and height pushes its parents size to be 100% width and height of the grandparent. How do I get the embed element to collapse all the white space around it so that it fits the width and height of its parent perfectly?

I have a page with an image, which upon being clicked gets replaced by an embed element that plays a quicktime movie.

The problem is that the embedded movie has a large amount of white space around it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title></head>
    <body>
        <div style="border:1px solid #000;">
        <embed id="iframeMovie" height="100%" width="100%" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
        </div>
    </body>
</html>

The video is of unknown size so how do I get rid of this whitespace while leaving height and width at 100%?

EDIT: Though it doesn't show, I am actually clearing the padding and margins. The white space still remains.

EDIT 2: The white space in question is between the movie and the black border, not the black border and the browser.

回答1:

Are you clearing the default browser margin and padding? Otherwise, you need to do that.

Most people use CSS reset styles to normalize margin and padding across browsers. A good one to use is Eric Meyer's: CSS Reset

EDIT: To remove the space underneath the embed, set display: block on the embed. See: http://media.nodnod.net/embed.html

回答2:

WOOHOO,
I've searched a very long time for this answer and I finally found it!
You'll have to put the embed element in an object element which is in an iframe or a frame:
The iframe page

<html>
<body>
<iframe src="sample.html" height="100%" width="100%">
</iframe>
</body>
</html>

the iframe source

<html>
<body>
<object height="100%" width="100%">
<embed src="sample.mov" height="100%" width="100%"/>
</object>
</body>
</html>

Make sure that the height and width value in the iframe, object and embed element the same is.

回答3:

I am not familiar with embed elements, but it seems to me that when you set the width to 100%, you set it to the width of the parent element, which is a div in this case and a div occupies the whole available width as it is a block element.

So you can either float the surrounding div or display it inline to have its size adjust to the contents instead of the available space around it.

回答4:

Try setting float: left on both the div and the embedded element just like this. That will remove the extra white space.

<div style="border:1px solid #000; float: left; width: 100%; height: 100%;">
   <embed id="iframeMovie" height="100%" width="100%" style="float: left" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>

回答5:

Hmm...

It's an ugly hack, but you could use a table:

<table width="100%" height="100%">
  <tr>
    <td align="center" valign="middle"><embed /></td>
  </tr>
</table>

回答6:

Have you used a DOM inspector to verify the whitespace isn't part of the embed?

Also, you can put it in a panel/div/etc and mess with the css:

position: relative; top: -10px; left: -10px; overflow: hidden;

回答7:

it turns out that theres no way of doing this other than making the movie scale to the size of the parent by using scale="aspect".

While not the perfect solution, it will have to do for now.

来源：https://stackoverflow.com/questions/712459/how-to-get-rid-of-white-space-around-an-embed-element

标签

html

css

embed

quicktime

How to get rid of white space around an <embed> element?

问题