div styled spans

17 November 2016 · a minute to read


Someone is totally amateur to front-end stuff, but likes a lot this totally new process of learning.

I am in React and I wanna create a small header-like thingy, without using any table tag. So, only divs, but wouldn’t it be better just for readability purposes to use a span for every header itself and then wrap them all together around a div ?

Yeah, better, so, I end up like this:

  <span>Header 1</span> 
  <span>Header 2</span> 
  <span>Header 3</span> 

Of course, I have a CSS like below for my spans:

span {
  width: 30%;

Correct? Could be, if <span> wasn’t an inline container. That is, this one will just ignore the specified width in our css file and place every span next to each other. What about mimicing the behavior of a div?

Yeah, inline-block!

See the Pen bBBKed by Thodoris Bais (@toubou91) on CodePen.

Closing Quote

Mistakes are for braves.