CODEWITHSUNDEEP
htmlcss
user928820
user928820

Reputation: 11

What is the difference between span, input, and div elements?

If you look at my code (here), I gave input element to form1 and span element in form2.span. form2.span is inline and input is also an inline element, but why are they displaying in different ways? If not, what about the input element?

What is the difference between span, input, and div elements?

Upvotes: 0

Views: 1974

Answers (1)

Cubed Eye
Cubed Eye

Reputation: 5631

A few things:

  1. There isn't a DOCTYPE for this file (nor <html> tags for that matter), it's not doing much here, but could do some random things if is not because it puts some browsers into 'quirks' mode.
  2. The reason your inputs are on the next line are because they don't fit on the line above. The is because the form width is set to 263px, the label width to 80px and the input width to 200px. 200 + 80px is bigger than 263px so it moves to the next line.
  3. The random bit of text the you have added in form 2 isn't actually in a <span> tag.
  4. The reason that Email show up before the random text is because it's floated to the left, so it moves past the random text that isn't floated(This link is a good link for explaining that).
  5. The other reason that email has moved up a line is because it fits there, remember labels are 80px. 80+80 +(random text width) is less than 263px that the form width is set as.

As for the difference between divs and spans/inline elements. Look up "Inline vs Block Elements" in Google, or even here on StackOverflow, I'm sure it's been covered a few times.

Upvotes: 6

Related Questions