div styled spans

div styled spans

2016, Nov 17    

Situation

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:

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

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.