In this code…
<li>
<label for="phone">Telephone:</label>
<input id="phone" name="phone" class="text" type="text" />
</li>
Is <li> an inline or block element?
Is <label> an inline or block element?
Is <input> an inline or block element?
TomTees
in this post:
are you demanding or respectfully requesting an answer?
have you performed a basic personal documentation on the subject first?
do you know what are the differences between inline and block elements? getting an answer will help you any?
noonnope
I asked because I couldn’t find the answer on Google or your links above…
I added this code at the top of my stylesheet to help me figure out what is going on…
*{
border: 0.1px dotted #FF0000;
}
When I add this code to the Input selector…
input{
display: block;
}
… I don’t see a red dotted box that extends the entire width of the page like I do when I apply the same CSS to the Label element like this…
label{
display: block;
}
So that is why I was unsure whether <input> is a block or inline element?!
TomTees
I don’t believe you looked at the 2 links I posted at all because if you had I find it hard to believe that you would not have found the answers to your question regarding the <input> and <li> elements because they are there.
I have had no trouble finding the answer for <label> using Google.
What search critera did you use when you tried to find the answers in Google?
Since in the other thread you said you don’t want to be spoon fed, then rather than me spending a minute giving you the answer, maybe you can spend the minute (which is all it should take you) to find the answers.
Really??
They say <label> is inline and yet I can toggle it back and forth between Inline and Block.
My question above why I can’t do the same thing with <input>.
The links you provided don’t answer that question (even though I did read them)…
TomTees
my original post with the 2 links was in reply to your original post in which you asked
Is <li> an inline or block element?
Is <label> an inline or block element?
Is <input> an inline or block element?
You then replied with
I asked because I couldn’t find the answer on Google or your links above…
But the 2 links I posted provide answers to at least 2 of your 3 elements and that is why I don’t believe you looked at those 2 links.
Kalon’s links actually does give you an answer to all three questions.
How are you toggling it?
Well, it depends upon where you use the elements as to whether the CSS will display in a certain way since LI is ‘flow’ and appears within UL, which is a block. Normally INPUT (empty) is used within a form as with LABEL so they are form controls and FORM itself being the block.
With CSS you don’t really alter the proprieties; you just fiddle with its visual rendering.
Not sure what you mean by ‘toggle back and forth’ … you can use CSS to change the appearance of any element between inline and block, but that doesn’t change the element itself. You can put
span {display:block;}
p {display:inline;}
in your stylesheet, but that doesn’t mean you can put a paragraph inside a span - the paragraph is still a block level element, even though you’ve changed the display.
In order to answer the question about inputs and why they react differently when set to display:block with css as opposed to elements like labels then you have to understand that a number of html elements are called [B]replaced element[/B]s and have their own special rules applied to them.
A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags). All other elements types can be referred to as non-replaced elements.
If you set an image to display:block you wouldn’t expect your dotted border to extend to the full width of the page would you? Instead you would expect it to wrap around the image.
This happens because the image has intrinsic dimensions much in the same way that inputs have intrinsic dimensions so they won’t extend to full width (unless you set the width to the width of the page). It’s the same analogy in that a block level element with a width won’t stretch to the full width of the page either and will only be as wide as the width you set.
For replaced elements you don’t need to set them to display:block to apply dimensions either because as replaced elements they are allowed to be dimensioned. In fact they pretty much behave the same as display:inline-block (just to muddy the water a little more).
Note that although CSS can change the display of an element it cannot affect the way that the html elements can be used. Setting a span to be display:block makes it generate a “block box” but doesn’t make the element itself a block element and the rules that bind html must still be applied and you could not therefore nest block elements inside this span (even though you declared it as display:block).
When I made my original post I was unsure of which it was, so I just played around and tried the following… (I’m not nearly as lazy as some people would make you think…) 
label{
display: inline;
}
label{
display: block;
}
For this first pair, my red dotted outline changed from tightly hugging the label to expanding to the entire page width.
So in my lingo, you apparently can “toggle” the <label> element to make it behave either like an Inline or Block element. (Making a <label> a Block element is how SitePoint - see I look things up on my own too! - recommends styling your labels to put them on top of your input boxes.)
So that was pretty self-explanatory.
But the plot thickens… dramatic music!
input{
display: inline;
}
input{
display: block;
}
For this pair, I was expecting the same behavior as described above, but when I used “display:block”, I didn’t see my dotted red box expand the way it did for the <label>.
At this point, this is moot since I was able to mimic the SitePoint tutorial and get what I needed. Yet being someone who is actually trying to learn - and not be “spoon-fed” - I was still curious how CSS really works.
Hope that makes sense?!
… you can use CSS to change the appearance of any element between inline and block, but that doesn’t change the element itself. You can put
span {display:block;}
p {display:inline;}
in your stylesheet, but that doesn’t mean you can put a paragraph inside a span - the paragraph is still a block level element, even though you’ve changed the display.
Hmmm…
TomTees
You always have another trick up your sleeve, don’t you Mr. O’Brien?! 
If you set an image to display:block you wouldn’t expect your dotted border to extend to the full width of the page would you? Instead you would expect it to wrap around the image.
This happens because the image has intrinsic dimensions much in the same way that inputs have intrinsic dimensions so they won’t extend to full width (unless you set the width to the width of the page). It’s the same analogy in that a block level element with a width won’t stretch to the full width of the page either and will only be as wide as the width you set.
I sorta figured that was what was happening, since the red dotted line always remained the same width as the width of the <input> box.
For replaced elements you don’t need to set them to display:block to apply dimensions either because as replaced elements they are allowed to be dimensioned. In fact they pretty much behave the same as display:inline-block (just to muddy the water a little more).
Okay.
Note that although CSS can change the display of an element it cannot affect the way that the html elements can be used. Setting a span to be display:block makes it generate a “block box” but doesn’t make the element itself a block element and the rules that bind html must still be applied and you could not therefore nest block elements inside this span (even though you declared it as display:block).
Okay.
Thanks Paul!! As always, you are a wealth of information and we all appreciate your help!!! (You’re also friendly!!)
TomTees
When you define an element multiple times in the same page, the last style defined is what the element gets. So it goes: external stylesheet, css defined in the <style> tag, then inline (<tag style="…'>). So in the code above, all <label>s will be blocks.