CODEWITHSUNDEEP
javascripthtmlcss
SquigglePad
SquigglePad

Reputation: 15

Getting rid of extra spacing for embedded media?

I'm currently working on a mosaic web layout of embedded media (twitter, instagram, etc...).

It has 3 columns, which are populated with divs set to display: none; using PHP and MYSQL.

Once the divs have been populated, I'm using a Javascript function showPost(); to display the content. When the users scroll to the bottom of the page, showPost(); is called again to unhide the next divs.

I'm running into a spacing problem with embedded media and I can't manage to find a way around it.

I've created a JSFiddle of the problem.

I've tried everything, padding, margin, line-height, all set to zero.

I can't figure out where this extra spacing is coming from? Any help would be much appreciated.

Click Here for JSFiddle

#column{
    position: absolute;
    padding: 0;
    margin: 0;
    width: 500px;
    line-height: 0;
}
#div01{
    position: relative;
    display: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    background-color: blue;
}
#div02{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
#div03{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}

Upvotes: 0

Views: 38

Answers (2)

yakutsa
yakutsa

Reputation: 652

Twitter widget iframe automatically creates a margin: 10px 0px; for the content. To remove this code, simply adding iframe {margin: 0 !important} to your css file would be enough.

Working demo

#column{
    position: absolute;
    padding: 0;
    margin: 0;
    width: 500px;
    line-height: 0;
}
#div01{
    position: relative;
    display: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    background-color: blue;
}
#div02{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
#div03{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
iframe{margin:0 !important;}

Upvotes: 1

Samutz
Samutz

Reputation: 2300

The issue is caused by the twitter widget adding an iframe with the margin set in the html element (<iframe stlye="margin-top:...). You can get around this with a bit of javascript to check iframes when they are added and remove their margins.

$(document).ready(function(){
    showPost();

    $('body').on('DOMNodeInserted', 'iframe', function () {
        $('iframe.twitter-tweet').css({
             'margin-top': '0',
             'margin-bottom': '0'
        });
    });
});

jsfiddle

Upvotes: 0

Related Questions