CODEWITHSUNDEEP
html
pradeep cs
pradeep cs

Reputation: 523

span height width unable to change

trying to make one horizontal box.. inside that update limits. if u see the below sample code, u can understand how i set limits. those limit classes height, i am unable to decrease. could please tel me what is reason.. i want to make it using div and span only

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    <head>
    <style>
        .limitBlock
        {
            border-left: 1px solid black;
        }
        .limitRBlack
        {
            border-right: 1px solid black;
        }
        .horbox
        { 
           background-color:#FFFFFF;
           height:4px;
           width:400px;
           margin-left:5px;
           border: 1px solid #AAAAAA;
        }
    </style>
    </head>
    <body>
        <div class="horbox">
            <div style="margin-top:-3px">
                <span style="margin-top: -4px;height: 9px;">
                    <span id="limit1" class="limitBlock" style="margin-left:-1px;"></span>
                    <span id="limit2" class="limitBlock" style="margin-left:100px;"></span>
                    <span id="limit3" class="limitBlock" style="margin-left:100px;"></span>
                    <span id="limit4" class="limitBlock" style="margin-left:100px;"></span>
                </span>
                <span id="limit5"class="limitRBlack" style="margin-left:96px;"></span>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 2353

Answers (2)

GolezTrol
GolezTrol

Reputation: 116190

Your class is named limitBlock, but a span is not a block and do not respond to setting height the way a block does. I would choose for a floating div in this situation.

Also, set overflow:hidden to prevent elements to be scaled to the full height of the content (line height of text).

Upvotes: 1

Brad Mace
Brad Mace

Reputation: 27916

spans are not block elements so you can't set their height. That's what divs are for.

Upvotes: 0

Related Questions