CODEWITHSUNDEEP
htmlcssinline
Andrei Gabreanu
Andrei Gabreanu

Reputation: 144

Why is this div with an inline-block span behaving differently than normal

Given this fiddle https://jsfiddle.net/2pct6pbv/2/ , why is the bellow div/span (screenshots) not acting in the same way - meaning the div should have a 24px height (line-height * font-size from body) while the span should have 0px height (check screenshot #2, bottom right chrome inspector)

EDIT: I've added a last screenshot with basically everything stripped down to be similar to the jsfiddle. I have no idea what else to try to reproduce the issue.

body {
  line-height: 1.5;
  font-size: 16px;
}

div {
  background-color: red;
}

span {
  display: inline-block;
}

I tried everything to make it behave the same way but it doesn't seem to work. In another page, with the exact same CSS, it seems to behave normally.

Any thoughts?

SPAN DIVenter image description here

parent-parent

dumb html

Upvotes: 1

Views: 235

Answers (1)

Felypp Oliveira
Felypp Oliveira

Reputation: 2187

I found that in the jsfiddle a <!DOCTYPE html> is included in the source, while your code is probably missing it.

This doctype specifies that the document markup is compliant to the html version 5 and should be processed like this, based on the W3 recommendations, aka, the no quirks mode.

Without the doctype, the quirks mode is triggered and the browser can process some elements in a custom way. So, I think in the W3 recommendations the span height is calculated even if it has no content, while in the quirks mode it seems to be processed just if there were any content inside.

Upvotes: 1

Related Questions