devツールがこのインライン要素をブロックとして表示するのはなぜですか？

Question

この魔法は何ですか？インラインで他のすべてのルールを覆しますが、それはブロックだと言います。

コードは、（問題がDIVなく、ネストされたスパンである）は、以下である：

.mycaption { 
 
    position: absolute; 
 
    left:5%; 
 
    z-index: 10; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    color: red; 
 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
 
    display: inline; 
 
    width:100%; 
 
    }

<div class="mycaption"> 
 
    <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed DO eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim AD minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip EX ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span> 
 
</div>

JSBin.

Answer 1

絶対配置要素を取られるからですout of the content flowですので、それはcan't be "inline"となります。 flex,block,none、または既存のコンテンツフローに関連しないその他の表示タイプにすることができます。