When you utilize the overflow:hidden property in an inline-block list, you may notice some

Question

When you utilize the overflow:hidden property in an inline-block list, you may notice some

Referring to this example: http://jsfiddle.net/CZk8L/4/

I'm puzzled by why the CSS style overflow:hidden is creating extra space at the bottom of the first li. Can anyone shed some light on this?

This has been bothering me for hours, as I need the

position:relative; overflow:hidden

on the first li to hide and move a form inside it (following the cursor).

I've tried setting height or max-height on each element, as well as experimenting with line-height, but nothing seems to work.

One potential solution could be adding the same

position:relative; overflow:hidden

to the second li to realign both elements. However, there still remains extra space beneath them, and I'd like to understand the underlying cause.

Thank you in advance for your assistance!

html css-position space css

Answer 1

Answer №1

To eliminate the space under li, adjust ul padding:5px to padding:0px.

 ul {display: inline-block; background:#DDD; padding:0px;white-space: nowrap; margin:50px 200px;}

You can position the li elements using vertical-align: top;

   .with_overflow li:first-child {position: relative; overflow: hidden;vertical-align: top; }
    .with_overflow form {position: absolute; opacity: 0;}
    .with_overflow iframe {display:none}

Check out the updated fiddle here

Answer 2

To eliminate the space under li, adjust ul padding:5px to padding:0px.

 ul {display: inline-block; background:#DDD; padding:0px;white-space: nowrap; margin:50px 200px;}

You can position the li elements using vertical-align: top;

   .with_overflow li:first-child {position: relative; overflow: hidden;vertical-align: top; }
    .with_overflow form {position: absolute; opacity: 0;}
    .with_overflow iframe {display:none}

Check out the updated fiddle here

When you utilize the overflow:hidden property in an inline-block list, you may notice some

Answer №1

Similar questions

Creating new accounts with SQL in HTML code

Streamlining the process of formatting URLs?

tips for expanding the size of your images

Error: The variable "Tankvalue" has not been declared

Display validation in HTML5 only when the form is submitted

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

The text entered in the textbox vanishes after I press the submit button

Flexbox properties are being ignored by input fields

Combining an array of intricate data models to create

stacking order of floated and positioned elements

Design a circular progress bar with a cut-off at the bottom

The inline-block property can become unstable when dealing with a large number

Overlay displayed on top of a single div element

Retrieve data from a different div, perform a subtraction operation, and dynamically update yet another div using jQuery

Failure to correctly apply CSS to Angular custom components causes styling issues

Maintain the selected bootstrap tab even after the page is refreshed, even when the content is loaded dynamically

Unable to adjust the text color to white

Floating elements overlapping fixed elements

Tips on leveraging state values within the makeStyles function in Material UI React

JavaScript multi-click navigation menu