Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by huckleberry
huckleberry
14,636 Points

Why are you allowed to set the width on an <input> element? Does that not defy the "inline element" rules?

Howdy all,

Ok so I'm looking over the code on one of the projects in jQuery as I always do and going through line by line of the CSS to see what was done and what the effects are and just generally how they went about things and I came across this snippet of code. 

label {
    display: block;
    font-size: 1.6em;
    margin: 0 0 .5em;
    color: #333;
}

input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    outline: none;
}

Now, I understand why they're doing things here. Form elements are inline elements by nature and in order to

  1. stack the elements on top of each other without using a bunch of <br> tags
  2. be able to apply bottom margin to the label and
  3. be able to (I thought) apply the width to the input tags.

However, I started mucking about with the code and commenting out various declarations and I found that even without display: block; applied to the input element, the darn thing still obeys the width: 100% declaration.

So... WHY? Why does this as an inline element obey a width property when one of the rules of inline elements is that you cannot apply a width to them?

Is this element, since it's a form element, simply exempt from the rule even though it's an inline element? Are there other exceptions?

I found some comments elsewhere saying that "if you don't set the display to block for an inline element and you use width the browser will automatically display it as block" which didn't hold up past my first test of that assertion so... what gives??

Thanks all!

Cheers,

Huck - :sunglasses:

Benjamin Keller
Benjamin Keller
20,763 Points

the input still needs a width. Inline means it doesn't take up the whole line of the page, like a block element does, but it still takes up some space. What is your problem with the width property?

huckleberry
huckleberry
14,636 Points

I don't have a problem with the width property itself ... I'm quite fond of dimensional properties. I use them quite often.

My problem was that it didn't make sense because as I knew it, input elements were inline elements and inline elements have a couple of rules about them such as "you can't apply width or height to them" yet here in the code, width was being declared in the input selector and the element was surely obeying.

So my world was going topsy turvy.

Cheers,

Huck - :sunglasses:

1 Answer

Kevin Kenger
Kevin Kenger
32,834 Points

This is a really good question. I'll be totally honest, I read it and thought, "Yeah, why is that?" Honestly, I had never thought about it.

Turns out, input elements are what are called non-replaced inline elements. And according to the W3C regarding the width property, it doesn't apply to non-replaced inline elements.

huckleberry
huckleberry
14,636 Points

Ahhh the old non-replaced inline elements. I actually only just came across that term last week when I was working on the lightbox lesson and I tried using margin: 250px auto; to center the img in the overlay and it wasn't working and it hit me that "oh, right! It's an inline element... I can't use margin auto on... well wait, I'm not supposed to be able to do width and height on an inline element either but I sure as heck can on an img tag!! What gives???" so I got to reading up about img tags and what the deal is (specifically because of the ability to set width/height yet img tags are inline elements). And through a maze of google searches leading to SO threads, I learned about this mysterious "replaced" vs. "non-replaced inline element" thingy. Once I read the NR Inline Element page on MDN, it made sense.

I just didn't think to put two and two together and assume that input must also be an NRIE. However, it makes sense, really. Just like the img tags, it serves to wrap around what will be data that has been served to it externally. But unlike the img element, with the input element you're not setting the width or height OF the external data (the actual user input) but rather the element itself.

But hey, tomayto tomahto... they say it's an NRIE, then that's what it is and that's how it behaves!

Thanks for pointing out what should've been obvious to me lol...

Cheers,

Huck - :sunglasses:

Edit: Ok, this still doesn't make sense to me... I misunderstood what you were saying. These are NRIE's and therefore the width property shouldn't apply to it. However, in my original post, I stated that it in fact is applying to the input element even without the block display property being set.

I misread your comment and was thinking you meant that inputs were actually replaced elements, not non-replaced.

Anyway, still confused. I have to do some more reading.