Применение стилей к span для создания кнопки в CSS

Быстрый ответ

Если вы желаете присвоить определенные значения ширины (width) и высоты (height) элементу <span>, вам нужно сменить его стандартный строчный тип отображения (display) на inline-block или block.

<span style="display: inline-block; width: 100px; height: 50px;">...</span>

Однако это лишь начало! Давайте углубимся в тему и разберем, как эффективно работать с <span> и другими строчными элементами, рассмотреть примеры и освоить полезные приемы.

Строчные против блочных элементов

По умолчанию <span> в HTML является строчным элементом. Это означает, что он не поддерживает непосредственное применение атрибутов width и height и его размеры автоматически подстраиваются под содержимое.

Осуществим преобразование <span> в блок

Чтобы <span> смог принять установленные значения ширины и высоты, вы можете преобразовать его в блочный элемент с помощью CSS.

span.sizeable {
  display: block; /* Теперь это возможно! */
  width: 100px; /* Зададим ширину */
  height: 50px; /* И высоту */
}

Став блочным элементом, <span> обретает схожесть с <div>. Это может быть полезным, например, при создании кнопки.

Подробнее об этом расскажет наш спикер на видео

Создавайте, а не имитируйте

Если вам требуется создать кнопку, вместо перехода к <span> лучше использовать <button>. Это решение более правильное с точки зрения семантики и простоты:

<button style="width: 100px; height: 50px;">Нажми на меня!</button>

Тег <button>, по своему назначению, уже предназначен для взаимодействия с пользователем, улучшает доступность и упрощает индексацию поисковыми системами.

Превращаем span в похожий на кнопку элемент

Но если все-таки вам нужно превратить <span> во что-то напоминающее кнопку, вот подходящее решение:

span.lives-as-button {
  display: inline-block;
  width: 100px;
  height: 50px;
  /* Здесь могут быть стили, имитирующие кнопку*/
}

Если вы хотите создать доступный <span>, выглядящий как кнопка, то не забудьте назначить ARIA-роли и обрабатывать клавиатурные события.

Визуализация

Вообразите строчный элемент <span> как гибкую структуру, занимающую пространство строго по размерам своего содержимого:

🎈 -> Вот я, <span>, подстраиваюсь под содержимое.

Теперь попытаемся определить ширину и высоту:

<span style="width:100px; height:50px;">🎈</span>

Что же произойдет на самом деле?

🎈 Я останусь таким же! `width` и `height`? Увы, это вне правил!

Теперь превращаем <span> в «блок»:

span { display: inline-block; }

И вот результат:

📦 -> Взгляните на меня, теперь я могу быть как коробка! `width` и `height`? С удовольствием, изменяйте меня как вам угодно!

Будьте внимательны! Распространенные ошибки

Упростим работу со <span>, рассмотрев наиболее общие ошибки:

Доступность — наше всё

• Выбирайте инструменты осмысленно. Исключите создание кнопок из <span>.
• Прибегайте к подходящим элементам. Вместо <span> лучше применить <button>.
• span предназначен для стилизации текста, используйте его в рамках этой роли.

Будьте осторожны с совместимостью браузеров

• Проверяйте стили в различных браузерах.
• Заботьтесь о совместимости, производя, например, проверку работы в режиме IE8 Quirks.

Идите к совершенству

• Управляйте атрибутами заполнения: display: inline-block поможет избежать проблем.
• Контролируйте переполнение содержимого: overflow: hidden поможет сохранить изначальный дизайн.
• Обменивайтесь опытом: делитесь наработками и решениями, например, используя JSFiddle.

Тонкая настройка и дополнительные материалы

Изучайте и проверяйте

• Службы, такие как JSFiddle, CodePen идеально подходят для тестирования и обучения.
• Проверяйте валидность HTML/CSS с помощью валидатора W3C.

Будьте уверены в своих свойствах

• Понимайте значение padding и margin.
• Изучайте и используйте CSS Flexbox и Grid для сложных макетов.

Уважайте интеллектуальную собственность

• Цените наработки других разработчиков, давая о них взяты сведения в своих комментариях или документации.
• Делитесь знаниями и помогайте сообществу развиваться.

Полезные материалы

1. MDN Web Docs – <span> — Информация и примеры использования <span>.
2. W3Schools – HTML-тег span — Понятное объяснение и примеры применения <span>.
3. W3Schools – Ширина и высота в CSS — Детальное руководство о размерах в CSS.
4. Разница между margin и padding в CSS – Stack Overflow — Ответы на вопросы о CSS Box Model.
5. Свойство display | CSS-Tricks — Информация о свойстве display и его роли в создании макетов.
6. Визуальная модель форматирования – CSS | MDN — Подробное объяснение визуальной модели форматирования CSS.