According to MDN:

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property.

So, since display is NOT an inherited value, I’m expecting the display: unset to make a div be block which is its “initial value”.

But doing a quick test it gives me the value of inline:

let output = document.querySelector('#output');
let box = document.querySelector('#box');
let btn = document.querySelector('#btn');

btn.addEventListener('click', () => {
  let computedDisplay = box.computedStyleMap().get('display').value;
  output.innerText = computedDisplay;
#box {
  display: unset;
  <div id="output"></div>
  <div id="box">box</div>
  <button id="btn">Get</button>

What am I understanding wrong here?


Thanks to @Barmar and @DustInComp the default display for a div is inline but browsers set it to block. Here’s the Chrome reference.