I have declared the display to be inline in the body tag of css but still the browser rendering is happening in block fashion, please help me understand the concept

I applied display:inline to li tag and that works(by showing in inline fashion) but why doesnt inline apply to a body tag , is my question?


``
<style>
    body {
      display: inline;
    }
</style>

<body>
    <ul>
        <li>
        1234
        </li>
        <li>
        5678
        </li>
     </ul>   
</body>
``

CodePudding user response：

Inherit `display`

Setting display on an element will not have its children inherit the value:

.wrapper {display: inline}

<div >
  <div>First text.</div>
  <div>Second text.</div>
</div>

While you can declare elements to inherit display from their ancestors, I do not recommend this (generally):

Declaring elements to inherit display requires a declaration just as much as declaring a specific display value.
If the selector is too unspecific, elements with sensible default values will lose those values.

It is important to choose good selectors for your use case. For your short example it is fine to have a generic selector, like body * (in words: "All descendants of BODY") which uses the universal selector * and a descendant combinator .

Note: Using a combinator generally does not select "sub-selections" itself, e.g. BODY of selector body * will not be selected. Also note that the descendant combinator is less specific than the child combinator >.

Here is an analogous example:

.wrapper * {display: inline}

<div >
  <div>First text.</div>
  <div>Second text.</div>
</div>

If however you still want to declare the elements to inherit display, here is an example:

.wrapper {display: inline} /*Set the value to inherit*/
.wrapper * {display: inherit}

<div >
  <div>First text.</div>
  <div>Second text.</div>
</div>

Lists and `display`

Lists' default display value is block, and the value of its children (LI) is list-item. If you simply want to get rid of the markers, declare the list list-style-type: none:

ul {list-style-type: none}

<ul>
  <li>First item.
  <li>Second item.
</ul>

But you can also declare the list and its children (ul, ul *) as display: inline. Note that removing padding requires another declaration.

ul, ul * {display: inline}

<ul>
  <li>First item.
  <li>Second item.
</ul>

List-items don't inherit `display`?

You asked why the following didn't result in the LIs to inherit the BODY's display value:

body {display: inline}
li {display: inherit}

<body>
  <ul>
    <li>First item.
    <li>Second item.
  </ul>
</body>

That is because—while BODY is declared as display: inline—the list in between has the default display value of block. Since inheritance happens from the element's immediate ancestor, the list-items will inherit the value block from the list.

Accessibility concern

Lists are semantic elements, and by default are interpreted as such by the browser. But changing their styles may change how the browser interprets them, potentially reducing their semantic down to a generic text-containing element.

Therefore it is generally good to ensure that lists are interpreted as lists by declaring the list and its items via the ARIA-attribute role as list and listitem, respectively. This overrules the browsers decision to interpret the element as a list, even if the browser would have decided not to interpret it as a list because of some CSS.

Inherit display

Lists and display

List-items don't inherit display?

Accessibility concern

Inherit `display`

Lists and `display`

List-items don't inherit `display`?