元素高度25像素和元素宽度200像素产生三种不同的结果

Question

我正在更新我们网站的页脚，并收到与上次截然不同的结果。也许有一个新鲜的眼睛的人可以帮助我看看我这次犯了什么错误以产生如此奇怪的结果。

在下图所示的灰色，蓝色和红色区域上，您可以看到它们的宽度分别为180px，20px和200px。但是它们的宽度几乎不一样。此外，它们的高度分别为25px，25px和25px，但是如果您查看第二个图像（外部div的宽度增加到220px，以便我们可以看到元素重叠），它们显然不是同一高度！

额外的功劳：为什么在第二张图片中，蓝色和灰色部分之间（水平方向）之间有一个奇怪的空间？

--Create a table for the Cipher characters
CREATE TABLE dbo.CharCipher (InputChar char(1) NOT NULL,
                             OutputChar char(1) NOT NULL);
GO

--Add a Clustered Primary Key
ALTER TABLE dbo.CharCipher ADD CONSTRAINT PK_CharCipher PRIMARY KEY CLUSTERED (InputChar);
GO

--Ensure that the Output character us unique too    
CREATE UNIQUE NONCLUSTERED INDEX UX_CipherOutput ON dbo.CharCipher (OutputChar);
GO

--Add your Ciphers
INSERT INTO  dbo.CharCipher (InputChar,
                             OutputChar)
VALUES ('H','T'),
       ('E','Q'),
       ('L','Y'),
       ('O','I'),
       ('1','6'),
       ('2','7'),
       ('3','8');
GO

--Create a Sample table
CREATE TABLE dbo.YourTable (YourString varchar(15));
INSERT INTO dbo.YourTable (YourString)
VALUES('HELLO123');
GO

--And now the "Mess"... I mean solution
WITH N AS(
    SELECT N
    FROM (VALUES(NULL),(NULL),(NULL),(NULL),(NULL),(NULL),(NULL),(NULL),(NULL),(NULL))N(N)),
Tally AS(
    SELECT TOP (8000) ROW_NUMBER() OVER (ORDER BY (SELECT NULL)) AS I
    FROM N N1, N N2, N N3, N N4)
SELECT YT.YourString,
       (SELECT ISNULL(CC.OutputChar,V.YourChar)
        FROM Tally T
             CROSS APPLY (VALUES(CONVERT(char(1),SUBSTRING(YT.YourString,T.I,1))))V(YourChar)
             LEFT JOIN dbo.CharCipher CC ON V.YourChar = CC.InputChar
        WHERE T.I <= LEN(YT.YourString)
        ORDER BY T.I
        FOR XML PATH(''),TYPE).value('.','varchar(8000)') AS NewString
FROM dbo.YourTable YT;

GO

--Clean up
DROP TABLE dbo.YourTable;
DROP TABLE dbo.CharCipher;

有关所涉及类的说明-它们仅处理字体和字体样式。

编辑：Jsfiddle