1 Replies - 200 Views - Last Post: 10 September 2017 - 09:58 AM

#1 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

why does label need display for width and input does not?

Posted 10 September 2017 - 07:28 AM

Good Morning. I was writing a code and realized that I did not have to write the display property for the width property to work for inputs. On the other hand, I need to write a display property with value inline-block or block for the width property to work for labels. Why does this happen if both are inline by default (according to MDN)?. The section of CSS I wrote, follows below:

 

label {

  display: inline-block;
  width: 50px;
  margin-top: 10px;
}

#name, #email {

   width: 280px;
   border-top: none;
   border-right: none;
   border-bottom: 1px dotted #DCDCDC;
   border-left: none;
   padding: 5px;
}




#name and #email are ids for inputs in the html.

If necessary, I will post the entire code. Thank you for your help.

Is This A Good Question/Topic? 0
  • +

Replies To: why does label need display for width and input does not?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,056
  • Joined: 08-June 10

Re: why does label need display for width and input does not?

Posted 10 September 2017 - 09:58 AM

Quote

Why does this happen if both are inline by default (according to MDN)?

this is not related to inline/block-level, for which the distinction is whether they break content flow or not (i.e. block level element by default use 100% width and force a line break).

As inline elements both label and input would wrap around their content box, which for label is the used text and for input is the default (clickable) area (since inputs usually start without any text content).
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1