Does height and width not apply to span?

Inline vs Block elements

In HTML, a <span> is an inline element by default which means it doesn't accept width and height attributes. Instead, it automatically sizes based on the content within.

Converting <span> to a block

Suppose you wish to force a <span> to accept width and height. Convert it to a block-level element using CSS.

span.sizeable {
  display: block; /* Now we're talking! */
  width: 100px; /* Stay this wide, please */
  height: 50px; /* And this tall */
}


Converting to a block-level effectively makes <span> behave like a <div> which can be more useful when you are trying to emulate a button.

Don't fake it, just make it

Imagine you need a clickable HTML element that looks like a button. You might be tempted to style a <span> which sometimes can become a bit messy. Here's a cleaner approach:

<button style="width: 100px; height: 50px;">Push the button!</button>


Using a <button> element means it's already accessible right from the get-go and speaks better to the user — and to search engines!

Dealing with button-like spans

But what if you're stuck with a <span> and you still need it to behave like a button? We've got just the trick:

span.lives-as-button {
  display: inline-block;
  width: 100px;
  height: 50px;
  /* Add your other button styles here */
}


However, when trying to make a <span> behave like a button make sure the appropriate ARIA roles and keyboard event handlers are added to make it accessible.

Watch out! Common pitfalls ahead

Let's go over some common pitfalls when getting creative with <span> styling:

Accessibility always comes first

• Always opt for the right tool for the job. Avoid mimicking buttons with <span>.
• Use the appropriate elements: Opt for <button> over <span> for interactions.
• Semantic HTML: <span> is meant for formatting inline text, use it accordingly.

Beware of browser incompatibility

• Test across multiple browsers: Ensure your styles work seamlessly on every browser.
• Don't forget legacy modes: Validate your styles in legacy modes like IE8 Quirks mode for maximum compatibility.

Above and beyond

• Control auto-fill: Generators that input data can misbehave. Set display: inline-block to your rescue.
• Control overflowing content: Using overflow: hidden with display: block can help keep your layout intact.
• Sharing is caring: When seeking external help, provide a JSFiddle link that showcases your issue — troubleshooting will be much faster!

Fine-tuning and extras

Explore and validate

• Hands-on experimentation: Tools like JSFiddle and CodePen are perfect for live testing and learning.
• HTML/CSS correctness: Always validate your markup using the W3C Validator to ensure it's standard-compliant.

Know your properties

• Understanding the box model: The padding and margin properties dramatically influence the rendered size of elements.
• For advanced layouts: Consider learning and using CSS Flexbox or Grid for flexible and intricate designs.

Give credit where it's due

• Stand on the shoulders of giants: If you've used someone else's solutions, honor them in code comments or documentation.
• Share your own knowledge: Helping others solve similar problems fosters a healthy developer community.