blob: d975aa9f6d26fffac4f217b06944d419cd65e3b9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical-align: baseline of an inline-block depends on 'overflow'</title>
<link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" />
<link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" />
<meta name="assert" content="The baseline of an inline-block whose ‘overflow’ property has a computed value not equal to ‘visible’ is the higher of either its bottom margin edge or the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case its baseline is the bottom margin edge." />
<link rel="match" href="inline-block-baseline-010-ref.xht" />
<link rel="author" title="Bert Bos" href="mailto:bert@w3.org" />
<style type="text/css"><![CDATA[
body {background: white; color: black; font-size: 15px}
p {white-space: nowrap; line-height: 5}
span {display: inline-block; overflow: hidden;
/* This inline-block has no line boxes, it's aligned at the bottom margin */
height: 1em; width: 1em; background: blue}
]]></style>
</head>
<body>
<p>
A blue square
<span></span>
sits on the baseline.
</p>
</body>
</html>
|
