Home/ Questions/Q 6843359
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:14:08+00:00

Here’s the fiddle showing my problem: http://jsfiddle.net/7QaXL/1/ In the webkit-based browsers the padding of

  • 0

Here’s the fiddle showing my problem: http://jsfiddle.net/7QaXL/1/

In the webkit-based browsers the padding of the <p>s seem to push the images up, which is not what I want.

So my questions are:

  • What is the correct behavior (according to the specs)?
  • How can I get six blocks of the same height, with inside elements with padding, without changing their alignments?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Firstly, I can’t replicate your problem. Secondly, I would try using something like this:

    <ul>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 1</h6>
                <p>Long description 1</p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 2</h6>
                <p>Long description 2</p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 3</h6>
                <p>Long description 3</p>
            </figcaption>
        </figure>
    </li>
</ul>

    This makes much more sense semantically as now the details are tied to the relevant images, and this markup will allow you to have greater control over the styling. figure and figcaption are HTML5 elements, if you need any further help just let me know!

    EDIT: Upon further exploration of the issue I have discovered that the issue you are encountering (as far as I can tell) is to do with display: inline-block; and its natural behaviour. If you replace that property with float: left; and give the unordered list overflow: hidden; (or use a clearfix technique) the problem should be resolved.

    • 0