• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / HTML / HTML span width – Set the Width of a Span in HTML

HTML span width – Set the Width of a Span in HTML

March 13, 2022 Leave a Comment

In this post, we’ll go over HTML span width. Let’s start with setting the width of a span in HTML. The main thing to remember about a span element is that it is an inline element, which means that you will not be able to set the width or height of it as is. So to give our span element a width, we must convert it to a block, or inline-block element. We do this by changing the display property of the element, which we can do in the HTML directly, or in a style tag.

<span id="span1" style="display: inline-block; width: 300px;"></span>

So in the example above, the span will now be an inline-block element with a width of 300px.

Let’s take a look at a simple example.


Let’s say I have the following HTML:


<style>.bg-color { background: orange; } #span4 { display: block; width: 300px; }</style>
<div id="div1">
  <p id="p1" class="bg-color" style="width: 300px;">This is p1</p>
  <span id="span1" class="bg-color">This is span1</span>
  <span id="span2" class="bg-color" style="display: block; width: 300px;">This is span2</span>
  <span id="span3" class="bg-color" style="width: 300px;">This is span3</span>
  <span id="span4" class="bg-color">This is span4</span>
</div>

In the code above, we have provided 4 different examples of span elements with styles. Each span will have an orange background color so you can see the width. Let’s go over each one.

The first element we have is a paragraph, #p1. Since paragraphs are not inline elements like spans are, we can apply a width to them. So the width of #p1 will be 300px.

The first span, #span1, does not have any style attributes in the HTML. So it is just showing what a default span width will have. The default width will be however much is needed for the content inside the div.

The second span, #span2, has the display property set to block and its width set 300px. Because we have changed the span’s width to block, it will have the width 300px.

The third span, #span3, has a width property set for it, but because its display property has not been changed to type block, it will not get the width that we set to it. Instead, it will just take up as much width as the text does, like #span1 did.

The fourth and final span, #span4, will be the same as #span2, but it has its styles set in the style tag. This is just showing another way to set the style of a span. So its width will be 300px.

Here is what the spans will look like, with the code again right below it:

This is p1

This is span1
This is span2
This is span3
This is span4


<style>.bg-color { background: orange; } #span4 { display: block; width: 300px; }</style>
<div id="div1">
  <p id="p1" class="bg-color" style="width: 300px;">This is p1</p>
  <span id="span1" class="bg-color">This is span1</span>
  <span id="span2" class="bg-color" style="display: block; width: 300px;">This is span2</span>
  <span id="span3" class="bg-color" style="width: 300px;">This is span3</span>
  <span id="span4" class="bg-color">This is span4</span>
</div>

Hopefully this article has been useful for you to understand how to set HTML span width.

Other Articles You'll Also Like:

  • 1.  How to Give a Textarea a Max Length
  • 2.  What is the Correct HTML for Inserting a Background Image?
  • 3.  What is the Correct HTML for Making a Text Input Field?
  • 4.  innerHTML vs outerHTML
  • 5.  HTML superscript – How to Raise Text in HTML
  • 6.  outerHTML – How to Get and Change the outerHTML Property of an Element
  • 7.  How to Call a JavaScript Function From HTML
  • 8.  Clicking on an Image to Enlarge it in HTML
  • 9.  How Do You Select All p Elements Inside a Div Element?
  • 10.  What Type of HTML List will Automatically Place a Number in Front of the Items?

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy