HTML BorderBackground elements

Hello All,

I am brand new to HTML and was hoping for some guidance on formatting a title.
My goal is to put each letter of the title in its own box where the boxes are all equal size and equal spacing. Currently the way I am trying to accomplish this, the box fits to the size of the letter it contains. The way I have achieved this is by using span elements for each letter with a CSS class to apply the style. I am guessing there is a more efficient way to do this with the whole word. The code and current display is below. Anything helps, and I would like to avoiid having to do graphic design if possible.



<h1><span class='titlebox1'>W</span><span class='titlebox1'>E</span><span class='titlebox1'>B</span></h1>

.titlebox1{
border:1px solid black;
padding:2px;
background-color:white;
color:black;
width:48px;
height:48px;
}