How to set width of spans without text using php?

October 27, 2023

This is what I have tried:


for($i = 0; $i < 256; ++$i)
{
    echo '<span id="red_' . $i . '" style="width:10px;height:10px;background-color:red;"><span>';
}

The spans are not displaying. If I add text to spans then they are displaying but it’s width is equal to the width of text. I want the width to exactly 10px.

>Solution :

The element <span> is not a block element but an inline one. Therefore it does not have a width. The simplest way to set it as a block or at least an inline-block element.

for($i = 0; $i < 256; ++$i)
{
    //                                     ******* here *******
    echo '<span id="red_' . $i . '" style="display:inline-block;width:10px;height:10px;background-color:red;"></span>';
}

for($i = 0; $i < 256; ++$i)
{
    //                                     **** here ****
    echo '<span id="red_' . $i . '" style="display:block;width:10px;height:10px;background-color:red;"></span>';
}

The difference is inline-block does not change to a new line, but block changes to a new line.