asked on

Display: Inline and display: block

Hi Experts,

I am doing a little experiment...I just placed 2 divs on my page, each of 95px, which were the same in width. However, as soon as I add the display: inline; line 10, 95px no longer equals 95 pixels. I also added the min-width and max-width, hoping to force it, but no luck.

Why is this?

#divSample{
    border: 1px solid red;
    height: 100px;
    width: 95px;
    margin-bottom: 5px;
}
.tdHead{
    border: 1px solid green;
    display: inline;
    text-align: center;
    font-weight: bold;
    height: 70px;
    max-width: 95px;
    min-width: 95px;
}

Open in new window

 <!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
        <title>RS @ APD</title>	       
        
        <link rel="stylesheet" href="dispatch.css">        
            
</head>

    <body >

        <div id="divSample"></div>
        
            <div class="tdHead">Pickup Time</div>          
    
    </body>
 
 </html>

Open in new window

SOLUTION

Thomas Struss

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION