допустимый запас применяется к другим элементам с абсолютным расположением.

Question

У меня есть контент-доступный div, и я помещаю его поверх этого элемента с абсолютным расположением (небольшая коробка).

Странная вещь: в Chrome свойство padding-right продолжает применяться к маленькой коробке, даже если это не в CSS. Кроме того, прокладка не применяется к содержательной.

• http://jsfiddle.net/xBU7D/

Является ли это ошибка Chrome? Я opretty уверен, что я делаю это правильно:

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

и

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;} 

Answer 1

The padding-right фактически не применяется в небольшой коробке он просто выглядит, как он.

padding-right добавляет ширину вашего контента, что делает его 220px широким.

Ваш маленький DIV позиционируется абсолютно с шириной 20px и слева от 180px, что приводит к 20px щели на правой - но это не padding-right. Вам просто нужно изменить left: 180px на left: 200px на ваш маленький ящик или сменить width: 180px на width: 160px вашего контента.

http://jsfiddle.net/xBU7D/2/

Answer 2

padding-right:20px там у вас на самом деле делает ваш 200px contenteditable ДИВ 220px. Итак, если вы установите второй div 200px влево, а не 180px, он идеально подходит.

http://jsfiddle.net/xBU7D/3/

Answer 3

Принимая ответ Hören как поблагодарить Вас за предоставление объяснений, что заставило меня понять, что происходит.

настоящий причина мой код не сделал то, что я думал, что это должно делать, это изменение модели окна. Я с quirksmode.org on that one, модель коробки W3C от content-box противоречит интуиции для меня. padding должен находиться внутри содержимого.

http://jsfiddle.net/xBU7D/4/ использует border-box и все в порядке.