CODEWITHSUNDEEP
htmlcssresponsive-design
user2968831
user2968831

Reputation:

Phantom 'padding' after image

I'm creating a website using the responsive.gs framework.

I've just added some images in a row of containing divs on the homepage.

For some reason the images are showing 'padding' at the bottom of them. Chrome Developer tools shows no padding but shows the containing div to be 230px x 239px when it should be 230px x 230px.

I have a feeling it's due to the clearfix method in the responsive.gs CSS because it adds an :after element to all of the major elements of the layout. However I've tried, changing to display:block, overflow:hidden, padding:0px, margin:0px and no such luck at clearing the 'padding'

/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

Has anyone encountered anything like this before?

Live site is here... http://www.haydockoffice.co.uk/

CSS for box...

.box {
    background:#f0f;
    padding:0px;
    margin:0px;
}

CSS for responsive grid system...

http://www.haydockoffice.co.uk/assets/css/grid.css

HTML for boxes...

<div id="homepage" class="row">

    <div id="content" class="row gutters">

        <div class="box col s3">
            <img src="assets/images/products/product1.jpg" />
        </div>

        <div class="box col s3">
            <img src="assets/images/products/product1.jpg" />
        </div>

        <div class="box col s3">
            <img src="assets/images/products/product1.jpg" />
        </div>

        <div class="box col s3">
            <img src="assets/images/products/product1.jpg" />
        </div>

    </div>

</div>

Unwanted effect:

unwanted padding

Upvotes: 0

Views: 776

Answers (3)

Maksim Gladkov
Maksim Gladkov

Reputation: 3079

Apply display: block to images.

Upvotes: 2

Jimbo Jones
Jimbo Jones

Reputation: 563

I know you said you have already tried display:block but I've just edited the site with inspector and applying display:block to the image removed the padding. 

<div id="homepage" class="row">

<div id="content" class="row gutters">

    <div class="box col s3">
        <img style="display:block;" src="assets/images/products/product1.jpg" />
    </div>

    <div class="box col s3">
        <img style="display:block;" src="assets/images/products/product1.jpg" />
    </div>

    <div class="box col s3">
        <img style="display:block;" src="assets/images/products/product1.jpg" />
    </div>

    <div class="box col s3">
        <img style="display:block;" src="assets/images/products/product1.jpg" />
    </div>

</div>

</div>

Upvotes: 0

Marcel
Marcel

Reputation: 1288

Set line-height to 0

.box {
   background:#f0f;
   padding:0px;
   margin:0px;
   line-height:0;
}

Before: http://jsfiddle.net/JfMFF/

After: http://jsfiddle.net/JfMFF/1/

Upvotes: 2

Related Questions