• Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
  • Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!

CSS unexplained vertical spacing

Collapse
X
  •  
  • Filter
  • Time
  • Show
Clear All
new posts

    CSS unexplained vertical spacing

    Doing a page of images with captions below. The images are of very different sizes and proportions.

    Style:
    .center {margin:0 auto; width:80%; max-width:1000px; border:1px solid black;}
    .content {margin-left:2%;}
    .pic {width:23%; margin-left:1%; vertical-align:bottom;}
    .txt {width:23%; margin-left:1%; vertical-align:text-top; text-align:center; display:inline-block; background-color:yellow;}

    HTML:
    <div class="center">

    <div class="content">
    <img class="pic" alt="x" src="ottersonrocks.jpg">
    <img class="pic" alt="x" src="clocktowerwest.jpg">
    <img class="pic" alt="x" src="otters&ivy.jpg">
    <img class="pic" alt="x" src="otterstails.jpg">

    <h3 class="txt">balh blah</h3>
    <h3 class="txt">lots of drivelin and stuff on and on<br></h3>
    <h3 class="txt">tripe</h3>
    <h3 class="txt">eh?</h3>
    </div>

    </div><!--end center-->

    Almost working but can't see why I'm getting an unwanted white space between image and caption as here:



    Any CSS experts see why? Cheers!

    PS "Solutions" I've found online don't work, display:block; screws things up totally, setting background-size, border, padding, margin etc make no difference.
    Last edited by xoggoth; 18 July 2018, 11:44.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

    #2
    Found solution that works:

    margin-bottom:-10px

    There you are! using something with a bottom sorts any problem!
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

    Comment

    Working...
    X