плавать и показывать привязанность по ширине и высоте

Question

Каково влияние inline, block и inline-block и плавающего в width и height?

Например, посмотрите на меню CSS ниже:

ul
{
    list-style-type:none;border-style:solid;border-width:1px;border-color:Blue;
    padding:0px;
    display:inline-block;
    float:left;
}
ul li{display:inline;}
ul li a
{
    /*display:inline-block;
    float:left;*/
    display:inline-block;
    float:left;
    background-color:rgb(100,170,110);
    color:Yellow;
    text-decoration:none;
    height:30px;
    padding-left:20px;
    padding-top:5px;
    padding-right:20px;
}
ul li a:hover{background-color:Yellow;color:Red;}

Я исправил это для IE и Firefox, добавив следующие коды для ul:

display:inline-block;
float:left;

Правда ли, что для встроенного тега высота = 0?

Верно ли это для левого плавающего тега, это ширина - максимальная ширина его дочерних элементов?

Почему элементы блока (например, элементы меню) будут иметь поля с их следующими элементами?

Answer 1

Вы получите некоторые глупые вещи со встроенным блоком с IE.Возможно, вам повезет больше, если вы поставите блокировать и плавать.Попробуйте код ниже

HTML

<nav>
  <ul>
    <li><a href="#">Home</a>
    <li><a href="#">About</a>
    <li><a href="#">Contact</a>
  </ul>
</nav>

CSS

ul { margin: 0; padding: 0; }
li { float: left; }
a { display: block; padding: 5px; margin: 0 5px; }