CODEWITHSUNDEEP
htmlcss
macio.Jun
macio.Jun

Reputation: 9895

Why is span defaultly designed to have a width shorter than that of its parent element, when span is used to contain an <input type="text">

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

My question is very simple. Why has div the same width as that of its parent, whereas span has a shorter width than that of its parent? i.e. if body's width is 1000px, then div has 1000px as well, but span has only 300px(fluctuate from different browsers)

Upvotes: 2

Views: 149

Answers (3)

Tepken Vannkorn
Tepken Vannkorn

Reputation: 9723

<div> tag is a block level element while <span> tag is the inline element.

  • Block level elements will expand its width to 100% of the parent item and produce a break line.

  • Inline elements only wrap the HTML elements (content), so its width is flexible according to the content

Upvotes: 4

Waleed Khan
Waleed Khan

Reputation: 11467

div is a block-level element, while span is an inline element. Block-level elements will take up the width of the parent element, while inline elements will not.

For example, a is an inline element. You wouldn't expect, nor want, it to take up the whole parent:

Some text <a href="#">and an engaging link</a>.

However, p is a block-level element. It will take up the entire parent (and it won't tolerate other block-level elements to be beside it):

<p>Some text</p>
<p>Other text -- not on the same line.</p>

Upvotes: 5

Tieson T.
Tieson T.

Reputation: 21221

<span> is an inline element, whereas <div> is a block element. Inline elements do not expand to fill their parent element.

Upvotes: 2

Related Questions