yuzu yuzu - 8 months ago 25
HTML Question

how to diplay two html elements seemlessly

My web page displays youtube iframe,say YOUTUBE, and a horizontal div element, say CAPTION. In detail, respecting the vartical order, the top of CAPTION follows just after the bottom of YOUTUBE. The two are almost connected. However they have some narrow room between. And I don't need it. How can you remove the unnecessary room between the two?
Here follows the code and the image of the web page.
For the code, the first represents the YOUTUBE and represents CAPTION which is a google polymer element which only has a div element. I guess that you don't need to understand google polymer to answer my question.
In more detail, I have not necessarily applied any css for the page except centering the two elements.

<div id="player" class="main" ></div>
        <demo-caption ></demo-caption>




you have to inspect the two elements to see if they have any unnecessary padding or margins, you can do this in chrome via ctrl+shift+I or right clicking on the element.

in addition you can always use minus margins to change your divs positions

    margin-top: -5px;

or use a relative position

    top: -5px;