Html contenteditable边距应用于其他绝对定位元素

我有一个contenteditable div，并将另一个绝对定位元素（一个小框）放在上面

奇怪的是：在Chrome中，

padding right

属性一直应用于小框，即使它不在CSS中。此外，填充不会应用于contenteditable

这是一个Chrome bug吗？我确信我做得对：

<div contenteditable=true>hello</div>
<div id=closer></div>

你好 及

div[内容可编辑]{
边框：1px实心#900；
宽度：200px；
溢出：隐藏；
空白：nowrap；
padding right:20px；/*这个
padding right
实际上并没有应用到这个小盒子上，只是看起来像它

右边的
填充将增加contenteditable div的宽度，使其
220px
变宽

您的小div位于绝对位置，宽度为
20px
，左侧为
180px
，这会导致右侧出现
20px
间隙-但这不是
填充的右侧
。您只需将小盒子上的
左侧：180px
更改为
左侧：200px
，或者将
宽度：180px
更改为内容可编辑分区的宽度：160px

右边的
填充
实际上并没有应用到小盒子上，只是看起来像它

右边的
填充将增加contenteditable div的宽度，使其
220px
变宽

您的小div位于绝对位置，宽度为
20px
，左侧为
180px
，这会导致右侧出现
20px
间隙-但这不是
填充的右侧
。您只需将小盒子上的
左侧：180px
更改为
左侧：200px
，或者将
宽度：180px
更改为内容可编辑分区的宽度：160px

您的
右键填充：20px
实际上使您的200px内容可编辑div 220px。
因此，如果您将第二个div 200px设置为左侧，而不是180px，它将完美地对齐

您的
右键填充：20px
实际上使您的200px内容可编辑div 220px。
因此，如果您将第二个div 200px设置为左侧，而不是180px，它将完美地对齐

接受霍伦的回答，感谢你的解释，让我意识到发生了什么

我的代码没有做我认为它应该做的事情的真正原因是darn box模型的改变。我同意，
内容框
的W3C box模型对我来说是违反直觉的。
填充
应该在内容内部

使用
边框框
，一切正常。
接受霍伦的回答，感谢你提供的解释，让我意识到发生了什么

我的代码没有做我认为它应该做的事情的真正原因是darn box模型的改变。我同意，
内容框
的W3C box模型对我来说是违反直觉的。
填充
应该在内容内部

使用
边框框
，一切正常。
这是一个问答网站而不是c&p网站希望你意识到，当你键入答案时，至少还有一个人在做同样的事情。别傻了，你的答案对复制它的人来说不是那么聪明：）这是一个问答网站而不是c&p网站希望你意识到，当你在那里键入答案时至少还有一个人在做同样的事情。别傻了，你的答案对别人来说并不是那么高明：）
   div[contenteditable] {
        border:1px solid #900;
        width:200px;  
        overflow:hidden;
        white-space:nowrap;
        padding-right:20px; /* <- the wascawwy wabbit */
    }
    #closer {
        position:absolute;
        border:1px solid #090;
        width:20px;
        height:20px;
        top:0px;
        left:180px;
    }
    body {padding:0;margin:0;}