Pocketgrid unwanted padding

[remove]

I love the combination of PW and Pocketgrid but ran into a problem. I know this is actually a CSS question and not a PW specific question, hope somebody can help.

When I place a image in a Block. An unwanted margin (red in attached file) is placed at the bottom. I'v tried putting padding and padding to zero in different ways but it just won't work. Does anyone has got a similar experience?

<div class="wrapper">
  <div class="block-group">
     <div class="block width100 bgred"><img src="<?php echo $config->urls->templates?>images/stappen-top.jpg" alt="" width="960px" /></div>
     <div class="block width33 bgddd">block 1</div>
     <div class="block width33 bgddd">block 2</div>
     <div class="block width33 bgddd">block 3</div>
     <div class="block width100 bgred"><img src="<?php echo $config->urls->templates?>images/stappen-bottom.jpg" alt="" width="960px" /></div>
  </div>
</div>

[kongondo]

Looking at PocketGrid's styles, I see no code that is doing what you describe. Are you sure this is not coming from your other styles, directly or inherited? What is Chrome developer/Firebug telling you?

[Martijn Geerts]

I think the issue is that the image is by default an inline element. Inline elements do not respond the same as block elements. Verticaly you can't set paddings to 0

You could float the image to make it a inline-block automagicly or you could make it a block element.

img {
    display:block;
    margin: 0;
    }

// center image with class .center
img.center {
    display:block;
    margin: 0 auto;
    }

img.left {
    float: left;
    }

img.right {
    float: right;
    }

[pwired]

Independent of pocketgrid:

  .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }

Apply the class to a container element e.g. <p>:
<p class="centeredImage"><img src="imgName.gif" alt=""></p>

Or control the inline element problem by converting the image from an inline to a block-level tag

  .centeredImage
    {
    text-align:center;
    display:block;
    }

 

[Martijn Geerts]

@pwired. 

Text is align is a CSS property that can be assigned to a block element to align its inline children. As an Image can't have children the text-align won't do anything. Block element's can be centered when you apply auto margins to left and to the right. 

[pwired]

you'll have to apply the text-align property to the container element

(the paragraph, DIV, or other block-level element that contains the image).

I thought that was already clear

[Martijn Geerts]

Please take a look again to your code pwired. 

//referring to this:
<img src="imgName.gif" class="centeredImage" alt="image description">

[pwired]

What can I say ? I just have this code in one of my websites (not processwire)

and it perfectly centers the image by using the <p> tag as a container element:

<a href="http://mydomain.com"><p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;"><img src="<?=URLPFAD?>templates/<?=$rowTemp->name?>/pics/image.png"/></p></a>

[Martijn Geerts]

  .centeredImage
    {
    text-align:center; <--- this doesn't do anything an image can't align it's children
    display:block;
    }

and apply it to the IMG you want to center:
<img src="imgName.gif" class="centeredImage" alt="image description">

In your example:

<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;"><img src="<?=URLPFAD?>templates/<?=$rowTemp->name?>/pics/image.png"/></p>

The Paragraph aligns the image and that image is displayed as inline. (when it centers)

Don't forget that a p element is a block level element.

[pwired]

I haven't tested that part of the code you referred to

just this part

<a href="http://mydomain.com"><p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;"><img src="<?=URLPFAD?>templates/<?=$rowTemp->name?>/pics/image.png"/></p></a>

The other part does not work as you say, so I removed it from my post.

[Martijn Geerts]

That part i've explained above pwired

[pwired]

darn, I have to double check before I post