Extra padding inside a div

Question

Hello!

I m having problem to determine from where extra padding is added to a div.

The div containing the text "Video Title" has too much padding added to it. Which is very much unwanted. And i have no idea from where this extra padding is coming.

I have added the styles, the html codes and the link to a page using this sample page.

Please have a look, i m about to go insane :)

Thanks in advance :)

Anjan

---

The style --

<style type="text/css">
    html *
    {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
    }
    table.video_list
    {
        width: 100%;
        border-collapse: collapse;
    }

    table.video_list td
    {
        padding: 5px;
        width: 33%;
    }

    div.vid_container
    {

        /*float:left;*/
        /*margin-bottom:15px;
        margin-left:5px;
        margin-right:15px;*/
        position: relative;
        display: inline-block;
        /*width:242px;*/
        margin: 10px;
        /*width: 300px;*/
    }

    div.vid_container div.duration
    {
        /*background-color:#160A07;*/
        /*background-color: transparent;
        background-image: url(../images/backs/duration_back_58x24.png);
        background-position: center center;
        background-repeat: no-repeat;*/

        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;

        background-color: #1b1b1b;
        bottom:27px;
        color:#FFFFFF;
        float:right;
        font-size:14px;
        padding:4px;
        position:relative;
        right:2px;
        text-align:center;
        width:50px;
        filter: alpha(opacity = 85);
        opacity: 0.85;
        font-weight: bold;

    }

    div.vid_container div.info_holder
    {
        width: 248px;
        margin: auto;
        display: block;
    }

    div.vid_container div.thumb_holder
    {
        width: 244px;
        height: 184px;
        vertical-align: middle;
        border: solid 1px #323434;
        padding: 1px;
        margin: auto;
    }

    div.vid_container div.thumb_holder img.thumb
    {
        width: 236px;
        height: 176px;
        vertical-align: middle;
        border: solid 1px #323434;
    }
    div.vid_container a.title
    {
        color:#DBA0AC;
        display:block;
        font-size:14px;
        height:35px;
        overflow:hidden;
        text-decoration:none;
        white-space:pre-line;
        width:248px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    div.vid_container a.title:hover
    {
        text-decoration: underline;
    }

    div.vid_container div.info_holder div.info_text
    {
        margin-top:5px;
        text-align: left;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    div.vid_container div.info_holder div.time
    {
        color: #ccc;margin-top: 5px;font-size: 90%;
        text-align: left
    }




    /******************************************
        Videos list
    ******************************************/

    .vid_container .site_name
    {
        text-transform: capitalize !important;
    }

    .vid_container img.thumb
    {
        width: 242px !important;
        height: 182px !important;
        border:1px solid #323434 !important;
    }

    /******************************************
        List View
    ******************************************/

    div.vid_container_listview
    {
        width: 100% !important;
    }

    div.vid_container_listview div.thumb_holder
    {
        float: left !important;
    }

    div.vid_container_listview div.info_holder
    {
        float: left !important;
        margin-left: 10px;
    }

    div.vid_container_listview div.info_holder div.title_holder
    {
        min-height:30px;width:600px;
    }

    div.vid_container_listview div.info_holder div.info_text
    {
        color: #ccc;margin-top: 5px;
    }

    div.vid_container_listview div.info_holder div.info_text div.site_name
    {
        font-size: 100%;margin-top:15px;
    }

    div.vid_container_listview div.info_holder div.info_text div.likes_and_views
    {
        font-size: 100%;margin-top:15px;
    }

    div.vid_container_listview div.info_holder div.added_at
    {
        color: #ccc;margin-top: 5px;font-size: 100%;
    }

    div.vid_container_listview a.title
    {
        font-size: 16px;
        font-weight: bold;
    }

    .float_left
    {
        float: left;
    }

    .float_right
    {
        float: right;
    }

    .clear
    {
        clear: both;
    }
</style>

And the Html:

<div class="vid_container">
    <div class="thumb_holder">
        <a href="#" title="Brunette Teen Paige Taylor">
            <img alt="Brunette Teen Paige Taylor" class="thumb" src="empty_thumb.png" norotate="1" />
        </a>

        <div class="duration">30:16</div>
    </div>

    <div class="info_holder">
        <div class="info_text">
            <a class="title" href="#" title="Brunette Teen Paige Taylor">Video Title</a>
        </div>  

        <div class="time">16 days  ago</div>                    

        <div style="color: #ccc;margin-top: 5px;">
            <div class="float_left site_name" style="font-size: 90%;">Youtube</div>
            <div class="float_right" style="text-align:right;padding-right: 2px;font-size: 90%;">1 likes — 140 views</div>
            <div class="clear"></div>
        </div>
    </div>
</div>

The link to this sample page is: Sample Page

Answer 1

According to my Firebug addin, the extra padding is caused by these two properties of the <a> element contained in the <div>

div.vid_container a.title {
    height:35px;
    width:248px;
}

Disabling these rules in the css editor removed the extra padding (top and bottom).

Edit : It seems that the overflow could also be due to this property on the <div> :

div.vid_container div.info_holder div.info_text {
    padding-top:1px;
}

You can try disabling this rule if it fits your needs better. It will remove the extra padding on the top of the div. You will however still have extra space on the bottom of the title, which is caused by the height of the <a> element, as explained above.

Answer 2

1. download firefox if you dont have it.
2. install firebug (an addon)
3. open up firebug in firefox and load your page.
4. right click on the div with video title and select inspect element
5. look at the style and computed tabs to see what is affecting the padding.

Answer 3

div.vid_container a.title has a height of 35px which is making your link bigger. I believe this is what is causign the extra space you don't expect (found courtesy of firebug in firefox).

Edit: Didn't even notice the horizontal padding at first but as Thibault Falise there is just a width in there as well.

Answer 4

Hi,

according to Firebug (which I would recommend you to use) and checking the link you provided that div has a padding of 1px and a top margin of 5px, as specified in the css. So there is no extra padding in itself.

As suggested, maybe you want to change the size of the a.title (height, width).