Javascript-форум - display:inline

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - display:inline (https://javascript.ru/forum/xhtml-html-css/8379-display-inline.html)

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

<head>
         <style>
             .cl {width:50px; height:50px; background-color:red;}
            body { margin:0; padding: 0px}
        </style>
  </head>
  <body>
      <div id="outerDiv" style="width:300px; height:90px;">
      <div class="cl"></div>
      <div class="cl"></div>
      <div class="cl"></div>
      </div>
  </body>

Почему, если я ставлю им display:inline, они исчезают ?
В IE - они не исчезают, это баг Firefox?

<head>
         <style>
             .cl {width:50px; height:50px; background-color:red; display:inline}
            body { margin:0; padding: 0px}
        </style>
  </head>
  <body>
      <div id="outerDiv" style="width:300px; height:90px;">
      <div class="cl"></div>
      <div class="cl"></div>
      <div class="cl"></div>
      </div>
  </body>

Они не исчезают, а схлопываются, т.к. в них нет контента. А ширины и высоты у инлайновых элементов нет.

Ага,
"Важным свойством строчных боксов является то, что у них есть свой собственный размер. Он складывается из размера шрифта (для букв), собственных размеров картинок, расстояния между строками. Это означает, что браузер при раскладке строчных боксов определяет их размер сам, без указания всяких width и height"
=>
фон увидим, если набьем строчные боксы строчным же содержимым (буковками))
Тогда это баг IE, что он отображает несхлопнувшиеся строчные div , если им задать размер.

Shaci,
Вы это с W3C взяли? Речь идет про анонимные текстовые блоки, а если инлайновый элемент пуст, или содержит только пробельные символы, в нем не содержится ни одного такового.

Цитата:

Сообщение от subzey (Сообщение 48645)

Shaci,
Вы это с W3C взяли?

http://softwaremaniacs.org/blog/2005...s-layout-flow/

Цитата:

Речь идет про анонимные текстовые блоки

Так там вроде и про текстовые и про картинки, то есть про все строчные боксы, и про то , что браузер определит их размер сам.

Цитата:

Сообщение от subzey

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

Цитата:

Сообщение от Shaci

фон увидим, если набьем строчные боксы строчным же содержимым (буковками))

Ну да, если инлайновый элемент пуст, то он схлопывается, а если содержит текстовый блок, то будет определен его размер и будет видно его фон.

<head>
         <style>
             .cl {width:50px; height:50px; background-color:red; display:inline}
            body { margin:0; padding: 0px}
        </style>
  </head>
  <body>
      <div id="outerDiv" style="width:300px; height:90px;">
      <div class="cl">param</div>
      <div class="cl">pam</div>
      <div class="cl">pam</div>
      </div>
  </body>

Просто в IE он у меня показывает пустые inline блоки того размера, который я им указал через width и height, т.е. они не схлопываются
Вроде так.

Shaci,
извините, кажется, мы говорим об одном и том же, и я просто Вас не понял.

Цитата:

кажется, мы говорим об одном и том же

Да, похоже на то:)

Там даже видно, что пробельные символы не входят, на них фона нет.

Цитата:

Сообщение от Shaci (Сообщение 48653)

Там даже видно, что пробельные символы не входят, на них фона нет.

Они не входят в div'ы, потому и фона нет:

<head> 
         <style> 
             .cl {width:50px; height:50px; background-color:red; display:inline} 
            body { margin:0; padding: 0px} 
        </style> 
  </head> 
  <body> 
      <div id="outerDiv" style="width:300px; height:90px;"> 
      <div class="cl"> param </div> 
      <div class="cl"> pam </div> 
      <div class="cl"> pam </div> 
      </div> 
  </body>

Цитата:

Сообщение от e1f (Сообщение 48776)

Они не входят в div'ы, потому и фона нет:

Да, это я спутал.