0

I have a page, the code is:

<!DOCTYPE html>
<html>
<head lang="en">
    <style>
        body {
            font-size: 0.625em;
        }
        .outer {
            cursor: pointer;
        }
        .text {
            display: table-cell;
            vertical-align: middle;
            height: 16px;
        }
        .text-wrapper {
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="text-wrapper">
        <div class="text">Search Now</div>
    </div>
</div>
</body>
</html>

I view this page in Chrome and Firefox,

and I asume that the outer div's height would be 16px. but in Chrome, the outer div's height is 19px, and in Firefox, the outer div's height is 20px(from the browser's computed box model view).

Now I want to know how the browser compute the outer div's height?

woodslee
  • 61
  • 1
  • 3
  • The answer to the general question asked would be a long and complicated paraphrase of a part of the CSS specification. This would be too broad for SO. You seem to have a much, much more specific question really, but you are not asking it explicitly. – Jukka K. Korpela Sep 02 '14 at 05:00

1 Answers1

0

It's because you're using table-cell in .text which causes border to be separated and you seem to have increased height.

Just set border to be collapsed in the outer div:

.outer {
   cursor: pointer;
   border-collapse: collapse;
   display: table;
}

Alternatively, you can just use display:inline-block to your .text

.text {
  display: inline-block;
  vertical-align: middle;
  height: 16px;
}
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • The alternative solution works, but the first one does not, unless you additionally make the in-between element a row: `.text-wrapper { display: table-row;}`. – Jukka K. Korpela Sep 02 '14 at 04:57