discover the <span>

I recently thought that maybe it is a good idea to experiment with each HTML tag on its own to understand it in an isolated scope and make it more useable and understandable for all of us.

So here we go with the first tag, the <span> tag, everybody should be aware of.

Therefor I want to use the chrome developer tools, because the offer a wide range of analyzing tools when it comes to HTML and CSS.

We begin with an unstyled span:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.element {
}
</style>
</head>
<body>
<span class="element"></span>
</body>
</html>

The browser shows that is at least not there,

because it has no content.

But let’s add a with and a height.

.element {
width: 100px;
height: 100px;
}

Changes exactly nothing:

Why is that?

A span is an inline element and that means, it only takes the space it needs to display its content, width and height are meaningless.

But what about padding and margin, that should do, or not?

.element {   
margin: 20px;
padding: 20px;
}

Let’s see. Selecting in the browser shows:

Oh, the top and bottom margin do not show up, only left and right. Padding is handled normal.

We additionally learn that the chrome developer tools only displays the size of the inner part of the box, including content, padding and border.

But what about the 58px, where does they come from? 20px + 20px = 40px, but what about the 18px?

Let’s see. Maybe the font-size?

.element {   
margin: 20px;
padding: 20px;
font-size: 0;
}

Yep, that’s it, even with nothing inside.

Now let´s add some content

<span class="element">a span</span>.element {
margin: 20px;
padding: 20px;
}

gives us:

The width of the text adds to the padding to get total width. The height of the text gets added to the padding to get the total height.

Okay, than let’s add another one to see how they work together. But before doing that, we enable a useful feature of the developer tools, the ruler.

Sometimes it is nice to get some helping lines in the view, to see how multiple elements align together. To enable open the settings page and check the ruler.

Image for post
Image for post

So let’s add another element:

.element {
margin: 20px;
padding: 20px;
}
.element1 {
margin: 10px;
padding: 10px;
}
<span class="element">a span</span>
<span class="element1">another span</span>

As you can see they are added right next to each other. That’s because they are inline elements. The browser does this as long as both elements fits into one row.

Image for post
Image for post

to be continued …

Developer since the 80'th, working at Forschungszentrum Jülich (http://www.fz-juelich.de) …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store