CODEWITHSUNDEEP
css
Uthman
Uthman

Reputation: 9807

Why is display:initial not working as expected?

I am hiding a child image and showing it when someone hovers a parent image. Problem is that when the child images shows up, it shows up on right-hand side of the parent image.

I was expecting it to appear below the parent image as that's what the default is. Doesn't setting display to "initial" makes the element get to its default state?

.child {
  display:none;
}

.parent:hover .child {
  display:initial;
}
<div class="parent">
    <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
  <div class="child">
    <img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
  </div>
</div>

This question is just for my understanding of CSS property display:initial. I am not in need of showing the child image above, below, right or left of parent image.

Upvotes: 1

Views: 2723

Answers (3)

Dasar
Dasar

Reputation: 360

The value initial means different things depending on the property you assign it to.

If you assign it to a non-inherited property, like display in your case, then its value changes to the initial value defined for that property in the CSS specification (not to a value previously defined in your stylesheet – that's why you get the behaviour described in your question: display is being defaulted to its initial value, which is inline)

If you assign it to an inherited property, like color for example, then the property takes any value defined previously in your stylesheet, if there is any. If there isn't, it defaults back to the initial value defined in the CSS specification. (E.g. for color it varies from browser to browser but it's usually black)

Relevant links:

initial - CSS | MDN

initial value - CSS | MDN

display - CSS | MDN

inheritance - CSS | MDN

Upvotes: 2

lumio
lumio

Reputation: 7575

So initial is actually the default state for a certain element.

Certain elements like div or p are by default display: block. So setting it to display: initial would be the same.

An img-Tag is by default display: inline. So setting it to display: initial is the same as setting it to inline.

Upvotes: -1

user7582130
user7582130

Reputation:

Well the initial value just indicates the value of the whole property. It relies on the property but not on anything else.

As an example: The display: initial; means inline, this is because that is the designated initial value of property.

In most cases the browser's default is block, because the element is a div.

Not sure if that will benefit your understanding, but there you go.

Upvotes: 0

Related Questions