Так как кнопка .yui имеет свойство display: inline-block, она будет вести себя как блок, но останется встроенной.
При использовании встроенного метода блочная модель этого элемента будет прикреплена к линии, а содержимое кнопки будет вести себя как блок. Таким образом, вам придется выполнить какую-то вертикальную настройку, как было предложено в Phase.
Поскольку кнопка имеет min-height: 2em, вам придется выполнить некоторые ручные настройки. Это:
.yui-skin-sam .yui-button {
margin-bottom: -0.5em; /* adjust for 2em min-height */
vertical-align: baseline; /* use consistent baseline */
}
дал мне хорошие результаты в IE7, FF3 и Chrome, но между ними все еще есть небольшое несоответствие. Возможно, вам придется изучить, какие другие свойства применяются к первому диапазону, первому дочернему диапазону и кнопке, которые вызывают небольшие несоответствия. Конечно, вы также можете настроить селектор так, чтобы он применялся только к одному экземпляру кнопки, а не ко всем кнопкам yui.
Вы также можете установить минимальную высоту для наследования, но тогда вы увидите, как другие свойства вступают в игру (например, первый дочерний элемент (интервал в интервале перед кнопкой) имеет макет блока).
В качестве альтернативы, вы можете начать добавлять несколько оберток вокруг остального текста, чтобы они работали так же, как кнопка, создавая соответствующие промежутки внутри промежутков, но вы, кажется, хотите этого избежать. Если вы это сделаете, проверьте пару разных браузеров.