CSS Span
<span>
elements are a generic HTML element similar to
<div>
. If you recall, divs are a generic container primarily used for the layout of a webpage and take up as much space as they can because they are a
block
element.
Spans are an
inline
element. They only take up as much space as needed and are primarily used for emphasizing something.
Here is a visual representation of each:
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs vs Spans</title>
<style>
* {
box-sizing: border-box;
font-size: 1.4rem;
font-family: monospace;
}
.div-style {
background: purple;
color: blanchedalmond;
height: auto;
padding: 20px;
margin: 10px;
}
.span-style {
background: orange;
color: black;
}
.highlight {
font-style: italic;
display: inline-block;
height: 100px;
width: 75%;
display: flex;
align-items: center;
background:mediumslateblue;
color: ivory;
}
h3 {
text-decoration: underline; }
</style>
</head>
<body>
<h3>Divs</h3>
<div class="div-style">I'm a div</div>
<div class="div-style">I take up as much space as I can</div>
<h3>Spans</h3>
<span class="span-style">I'm a span</span>
<span class="span-style">
I only take up exactly as much space as I need.
</span>
<span class="span-style">I emphasize text a lot.</span>
<div class="div-style">
<span class="span-style">Spans can go inside divs...</span>
<p>... have different styling than other text...</p>
<span class="span-style"
>...and are inline elements that can't have height or width
manipulated unless you set
<span class="highlight">display: inline-block</span></span
>
</div>
</body>
</html>
We use classes to group the spans and the divs together to change the color and background color in CSS. Remember height or width on spans cannot be changed unless you add the
display: inline-block
property.
Here’s what it looks like when they work together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Divs/Spans</title>
<style>
* {
box-sizing: border-box;
font-size: 1.4rem;
font-family: monospace;
}
.div-style {
background: purple;
color: blanchedalmond;
height: auto;
padding: 20px;
margin: 10px;
}
.span-style {
background: orange;
color: ivory;
}
h3 {
text-decoration: underline;;
}
.nav {
background:goldenrod;
padding: 20px;
}
.headline {
font-weight: bold;
font-size: 1.6rem;
}
.flex-container {
display: flex;
}
.container {
display: flex;
flex-direction: column;"
}
.sidebar-main-container {
background:indianred;
padding: 20px;
}
.sidebar {
background: white;
color: black;
width: 40%;
padding: 20px;
}
.main-container {
width: 60%;
padding: 20px;
background:green;
font-size: 1.2rem;
}
.main-content {
width: 100%;
margin: 10px 0px;
display: flex;
}
.child-container {
width: 50%;
font-size: 1.0rem;
}
.pink {
background: pink;
color: black;
}
.red {
background: red;
}
p{
font-size: 1.2rem;
}
.footer {
text-align: center;
background: cornflowerblue;
}
.footer span {
font-size: .7rem;
}
</style>
</head>
<body>
<h3>Using Divs and Spans Together:</h3>
<div class="div-style container">
<div class="headline">Div 1: Main Overall Container</div>
<div class="nav">
<h2>Div 1a: Header</h2>
<p>Divs can create boxes for web layout</p>
</div>
<div class="sidebar-main-container">
<p>Div 1b: Sidebar-Main Content</p>
<div class="flex-container">
<div class="sidebar">
<span style="font-size: 1.2rem;">Div 1b.1</span>
<span style="font-size: 1.2rem; color: purple;">Sidebar Container</span>
</div>
<div class="main-container">
<span style="font-size: 1.2rem;">Div 1b.2</span>
<span style="font-size: 1.2rem; color: orange;">Main Container</span>
<div class="main-content">
<div class="child-container pink">Child 1 1b.2.1</div>
<div class="child-container red">Child 2 1b.2.2</div>
</div>
</div>
</div>
<div class="footer">
<span>Footer</span>
<span>Container</span>
<span>Goes Here</span>
</div>
</div>
</div>
</body>
</html>
Spans and divs work in conjunction with other HTML elements to create the basic building blocks of your website. Spans can be styled separately from your divs to create emphasis.
