Issue with setting width of span tag

Question

When I set width: 100% to a input element it stretches to the whole width of its parent, but then I do the same with a span tag, it doesn't stretch, but only stays as it was, having the same width as without setting width: 100%. Span and input tags are both inline, so I can't understand why they work differently.

Can you please explain why it works in this way?

Here's the code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input {
      width: 100%;
      margin-bottom: 10px;
    }
    
    span {
      width: 100%;
    }
  </style>
  <title>Document</title>
</head>

<form action="#">
  <input type="text">
  <input type="text">
  <input type="text">
</form>
<div class="spanBlock">
  <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui aut obcaecati quod error ipsa. Mollitia,
            officiis excepturi. Accusamus distinctio unde deserunt nobis animi ut nemo quia quidem culpa, voluptas
            temporibus?</span>
</div>
</body>

</html>

Span is an inline-element, so there's no width. If you want to set the width, you need to change it to a block element. — Sven, Jan 20 '22 at 13:24
Also inputs are inline elements. And width property works. That shouldn't be answer. — Cagkan Mert Oztas, Jan 20 '22 at 13:29
@AlexanderMamutov can you please, provide a link, where it is said that `input` is `inline-block` element, cause [here](https://www.w3schools.com/html/html_blocks.asp) is said, that `input` is `inline` element — MichaelLearner, Jan 20 '22 at 14:10
input is an *inline replaced element*. The trick is with **replaced**. inline replaced behave as inline-block — Temani Afif, Jan 20 '22 at 14:23
I can't find default value for display property. But I got an answer here https://stackoverflow.com/questions/68901657/where-can-i-find-the-documentation-for-the-default-display-for-input . Also I see `display: inline-block;` in user agent styles in chrome dev tools. — Alexander Mamutov, Jan 21 '22 at 16:12

Cagkan Mert Oztas · Accepted Answer · 2022-01-20T13:28:30.337

-1

It's because inputs have default browser values like writing-mode & appearance and span elements are not.

If you give css to span like

span {
  appearance: auto;
  -webkit-writing-mod: horizontal-tb;
  width: 10%;
}

it will be works without change display property.

edited Jan 20 '22 at 13:28

answered Jan 20 '22 at 13:11

Cagkan Mert Oztas

156
1
11

score -1 · Answer 2 · answered Jan 20 '22 at 14:03

Well is used to change the decoration of text in "in-line" mode only, ie it is meant to be used as an inline element not as a block element hence width:100%;(effectively making it a block element) may not work.

While is used as both "in-line" as well as "block" element. Hence width: 100%; works.

It is just how they are made.

Issue with setting width of span tag

2 Answers2