www.webdeveloper.com
Results 1 to 4 of 4

Thread: Space using inline-block (CSS)?

  1. #1
    Join Date
    May 2014
    Posts
    13

    Question Space using inline-block (CSS)?

    I have noticed that while building my site in responsive and using the div/css inline-block in css that there is space at the bottom of the div? Has anyone else noticed or had this issue and have a solution to this problem?

  2. #2
    Join Date
    May 2014
    Posts
    891
    If the space is at the bottom, that's the same bug as you see on multiple images -- vertical-align being the solution.

    vertical-align:top;

    Will actually do the trick in most cases... just as with the oddball gap below images people have hacked around for a decade or more. Stands to reason as inline-block is basically an IMG tag's default behavior -- You might also try bottom -- it's kind-of hit or miss.

    Though really it's part of why I don't use inline-block on block level elements in all but the rarest of cases. The other part being IE7/earlier can only make inline-level elements inline-block. (kind-of)

    Also, test across browsers, you'll notice that gap is probably a different size -- fun, no?

    If that doesn't do the trick, you might want to look at using flex-box or sucking it up and floating things, at least as a fallback for when inline-block isn't getting the job done.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    May 2014
    Posts
    13
    Originally I was building a sub menu into a wrapper div that was holding an image (responsively) then to keep the menu in the text area floated right (image floated left) and had to set the wrapper to inline-block to make it stretch with the inner div. So far I have only been able to get images to act responsive (stretches with the size of the div) if the image is in a div itself. Maybe I am doing it wrong or there is another way? Anyhow it just seems I have that awkward space at the bottom of the wrapper div which I ended up taking out and floating the text box and image div seperately.

    I also had issues with the footer, where the paragraph tag was causing the footer part to take on the paragraph space. I fixed this by simply changing the div to a class to edit the font. Seems like you have to watch every little thing you do when using inline... Placing div inside a div is becoming a challenge.


    Quote Originally Posted by deathshadow View Post
    If the space is at the bottom, that's the same bug as you see on multiple images -- vertical-align being the solution.

    vertical-align:top;

    Will actually do the trick in most cases... just as with the oddball gap below images people have hacked around for a decade or more. Stands to reason as inline-block is basically an IMG tag's default behavior -- You might also try bottom -- it's kind-of hit or miss.

    Though really it's part of why I don't use inline-block on block level elements in all but the rarest of cases. The other part being IE7/earlier can only make inline-level elements inline-block. (kind-of)

    Also, test across browsers, you'll notice that gap is probably a different size -- fun, no?

    If that doesn't do the trick, you might want to look at using flex-box or sucking it up and floating things, at least as a fallback for when inline-block isn't getting the job done.

  4. #4
    Join Date
    May 2014
    Posts
    891
    I think I'd have to see what you have for code to help more... though could you get away with some other form of float wrapping like overflow:hidden or making the wrapper float as well?

    Though an image shouldn't be switching size with a DIV -- even in a responsive layout -- almost sounds like you have a design element or concept that's not compatible with responsive design.

    Stretching an image in a browser is almost always a disaster, given how crappy browser scaling of images is in the first place -- doing so sounds more like trying to make some fixed width design layout concept do something it was never meant to.

    But again, guessing blind with no code, no images, and no idea what you are ACTUALLY trying to do.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles