This is not directly a tachyons issue but rather a html/front end one. I wanted to learn more about when <span> elements should be used and how they behave for styling:
Purpose
Like a <div> but unlike a <div>, they're inline not block level.
In the content categories: 'flow content' and 'phrasing content'. Flow content should contain text or embedded content. Phrasing content makes up paragraphs and defines the text and mark up it contains.
Styling behaviour
Inline so they don't create a break before or after the element
Padding only affects the first line of a span
Can't set a width on them
Can't use vertical margins on them (only horizontal)
You shouldn't put block elements inside of a <span> (or any inline element)
Examples
Here are a couple of examples where a <span> might not be needed:
This <span> should be a <h2> or another title tag or a <p> tag. It is not being displayed inline and so making it a <span> isn't semantically helpful.
This <span> is not needed, it is wrapped around an <img> element which is already an inline element. So we can save the extra bit of code and do without it.
This is not directly a tachyons issue but rather a html/front end one. I wanted to learn more about when
<span>elements should be used and how they behave for styling:Purpose
<div>but unlike a<div>, they're inline not block level.Styling behaviour
<span>(or any inline element)Examples
Here are a couple of examples where a
<span>might not be needed:This
<span>should be a<h2>or another title tag or a<p>tag. It is not being displayed inline and so making it a<span>isn't semantically helpful.This
<span>is not needed, it is wrapped around an<img>element which is already an inline element. So we can save the extra bit of code and do without it.