CODEWITHSUNDEEP
inputheightwidthhtml
Rama Rao M
Rama Rao M

Reputation: 3071

Span tag height is not adjusted to child input tag

Hi,

I have a input tag which is in span.I want to style that span setting border and box-shadow and for input tag border:none. The problem is, It looks,the height of the input is more than span tag,so if I put border to span, its not shown,since it is covered by input tag.

I believe that, If a element is put inside span tag, then span tag width and height must be adjusted to child tag height and width.But that's not happening here.

Here is my code..What could be wrong....

Note:In this code, I didnt put border:none for input tag,to make visible what actually the problem is...!!!

 <style>
  body{
   font-family:Arial,Tahoma,sans-serif;
   font-size:0.7em;
  }
  span{
  border:1px solid blue;
  box-shadow:3px 3px 3px #888;
  }
   input {
   font-size:100%;
   }
  </style>

 <body>

  <span>
    <input type="text"/>
  </span>
 </body>

Upvotes: 0

Views: 599

Answers (1)

Tobi
Tobi

Reputation: 1438

I think, you could use the css and html like this:

 <style>
  body{
   font-family:Arial,Tahoma,sans-serif;
   font-size:0.7em;
  }
   input {
   font-size:100%;
   border:1px solid blue;
   box-shadow:3px 3px 3px #888;
   }
  </style>

 <body>

    <input type="text"/>
 </body>

Just put the border and box-shadow into the input-tag and you could remove the span-tag.

Upvotes: 2

Related Questions