1

Setting height on inline elements doesn't work.

Setting height on inline-flex elements work even though it shouldn't!

why does setting height on an inline-element work in the below example?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


div {

    border: 1px solid red;
    padding: 10px;
    margin-top: 20px;

}
span {
    border: 1px solid black;
}

.container{
    border: 5px solid yellow;
    display: inline-flex;
    height: 60px;
}
<body>
    <div>
        <span class="container">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        </span>
    </div>
</body>

EDIT:

The linked question does not explain why inline-flex accepts a height.

inline elements do not accept a height! setting an element to inline-flex set's the element outer display mode to inline,

Liam Anderson
  • 47
  • 3
  • 1
    Why shouldn't it work? `inline` is not the same thing as `inline-block` or `inline-flex`. Nothing says you can't set a height on the latter two. – ray Oct 20 '22 at 21:52
  • inline elements shouldn't accept a height. and setting the element as `inline-flex` should set the element's outer display to `inline` while only setting the inner display to `flex` – Liam Anderson Oct 20 '22 at 22:11
  • You’re free to believe that they shouldn’t, but they do, and I’ve never seen anything that says otherwise and I’ve been doing this stuff for a long time. – ray Oct 21 '22 at 02:12

1 Answers1

-2

There is no css code as name display:inline-element. You can use here display:inline-block and display:inline-flex its make div flexible for get the items inline.

Navin Singh
  • 9
  • 6