Display:Inline Resets Height and Width

display:inline resets height and width

Inline objects don't have heights or widths. Why are you setting them inline to begin with? You probably want to either float them or use display: inline-block.

Set display:inline to a div results in zero width and height

Because a <div> is a block element you must specify it's width and height or it wil be wrapped arround the content inside the <div> element.

And indeed changing it's display to display:inline; or display:inline-block; changes his normal behaviour.

Inline Block divs changing height on Active State

Although the best way to achieve this is the new CSS grid spec or flex, I've updated your code here so it works properly:

https://jsfiddle.net/xL8g9jyh/

    .div{
        height: 50vh;
        width: 50vw;
        display: block;
        text-align: center;
        line-height: 50vh;
        color: white;
        font-size: 4rem;
        overflow: none;
        float:left;
        box-sizing: border-box;
    }

Basically:

1. Use float:left and display:block instead of display:inline-block and max-width.
2. Use box-sizing: border-box; so the div does not change size when you add padding.
3. Also, don't forget to assign overflow: hidden; in the body css element as this locks the global size of the body, thus preventing displaying scrollbars unintentionally.

Please let me know whether it works for you.

CSS width and height not working for div with display: inline

display:inline elements are rendered inline - meaning they do not respect width and height declarations but just 'go with the flow'.

You probably intend to use display:inline-block instead, making it behave like a block element itself, but follow the parent's flow as an inline element.

The fixed fiddle.

input , button are inline, still I can set width and height

Depending on the version of CSS you are looking at, they are either replaced inline elements or they are display: inline-block;. Either way, height and width do apply.

How to set width of a inline element?

To apply width, set css property 'display' to either 'block' or 'inline-block'.

block: the element will sit in a single line. In such case you may want to set float so links are in the same line;

inline-block; the element will have height, width, etc, and multiple elements will sit in the same line (block).

Why inline and inline-block have different height with the same text content

This is related to how line-height works and how the height of each element is calculated.

Let's start with a trivial example to highlight the effect of line-height

span {
  border:1px solid red;
  padding:5px;
  line-height:50px;
}

<span>some text</span> <span style="display:inline-block">some text</span>