Why Does Display:Block Not Stretch Buttons or Input Elements

Why does display:block not stretch buttons or input elements

I think that a default value is assigned to the size attribute of inputs which means unless you specifically override it, your width won't be 100%

If you look at the firefox specification and scroll down to the section about size, you can see that they have a default value of 20

I'm not sure about the properties for the button that cause that not to be 100% width when changed to block

Why doesn't display: block & width: auto stretch a button to fill the container?

(Shameless copy of the answer at this source and possible dublicate, which extracted the information from this article.)

There are a few elements (<input>, <select>, <button>, <img>,
<object>, and <textarea>) that are considered replaced elements
whose appearance and dimensions are defined by an external resource.
(e.g. the operating system, a plugin, etc).

Replaced elements can have intrinsic dimensions—width and height
values that are defined by the element itself, rather than by its
surroundings in the document. For example, if an image element has a
width set to auto, the width of the linked image file will be used.
Intrinsic dimensions also define an intrinsic ratio that’s used to
determine the computed dimensions of the element should only one
dimension be specified. For example, if only the width is specified
for an image element—at, say, 100px—and the actual image is 200 pixels
wide and 100 pixels high, the height of the element will be scaled by
the same amount, to 50px.

Replaced elements can also have visual formatting requirements imposed
by the element, outside of the control of CSS; for example, the user
interface controls rendered for form elements.

With HTML5 you have a couple more of those like <audio> and <canvas> and some more.

Please note that - as you will see in the discussions in the comments - button is not really a replaced element defined by w3c. However it is behaving like one, which is discussed further in this article.

button with display:block not stretched

You can add padding to div container, and remove horizontal margin from buttons. Then you can apply width 100% to them:

<!DOCTYPE>
<html>
<head>
    <title>TEST</title>
    <style>
        button {
            display: block;
            width:100%;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div style="width: 100px; border: 1px solid black; padding:0 10px;">
        <button>hello</button>
        <button>hi</button>
    </div>
</body>
</html>

Demo: http://jsfiddle.net/xwt9T/1/

Input with display:block is not a block, why not?

Check out what I came up with, a solution using the relatively unknown box-sizing:border-box style from CSS 3. This allows a 'true' 100% width on any element regardless of that elements' padding and/or borders.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

This solution supports Internet Explorer 6 and Internet Explorer 7 via a behaviour written by Erik Arvidsson with some tweaks from Dean Edwards to support percentage and other non-pixel widths.

Working example

Behaviour (boxsizing.htc)

button element display-property differently than a element

The reason why your button behaves differently is that a button is a so called "replaced element" whose (appearance and) dimension are defined by the operating system/browser. Anyhow I'ld suggest to use flex-box here.

.buttonRow {  display: flex;  flex-direction: column;}
.button {  margin: 0 auto 15px auto;  background-color: #ccad91;  color: white;  font-size: 18px;  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  padding: 17px 50px;  border-radius: 35px;  border: none;  outline: none;  text-decoration: none;}

<div class="buttonRow">  <button class="button">Proceed</button>  <a class="button" href="index.html">Cancel</a></div>

Issue with setting width of span tag

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.

What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container

Alright, due to the clarification of the original question...I did some digging and found these laments and this article.

There are a few elements (<input>, <select>, <button>, <img>, <object>, and <textarea>) that are considered replaced elements whose appearance and dimensions are defined by an external resource. (e.g. the operating system, a plugin, etc)

Replaced elements can have intrinsic
dimensions—width and height values
that are defined by the element
itself, rather than by its
surroundings in the document. For
example, if an image element has a
width set to auto, the width of the
linked image file will be used.
Intrinsic dimensions also define an
intrinsic ratio that’s used to
determine the computed dimensions of
the element should only one dimension
be specified. For example, if only the
width is specified for an image
element—at, say, 100px—and the actual
image is 200 pixels wide and 100
pixels high, the height of the element
will be scaled by the same amount, to
50px.

Replaced elements can also have visual
formatting requirements imposed by the
element, outside of the control of CSS;
for example, the user interface controls
rendered for form elements.

W3C's CSS 2.1 "Visual Formatting Model Details" section discusses the calculation of widths of both replaced and non-replaced elements.

Overall...pretty annoying for some form elements (<textarea>, <button>, and <input>). Can/will it change? Probably not any time soon...Until it does change at the core, we'll have to stick with the hacks :(

Allow inline block elements to stretch fluidly and collapse and stack as viewports shrink

Many thanks to Chris Coyier and CSS Tricks. Flexbox is indeed the answer. Rather than copy and paste his solution, here's the link to his Pen: http://codepen.io/chriscoyier/pen/yCeax. If you are interested in his whole thought about it, here is the blog post to it: http://css-tricks.com/filling-space-last-row-flexbox/

Here's the actual solution, just in case the CodePen goes away.

HTML

<button id="add">Add Child</button>

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

* {
  box-sizing: border-box;  
}

#parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 50px;
  background: red;
  flex: 1;
  min-width: 25%;
  border: 5px solid white;
}

@media (max-width: 700px) {
  .child {
    min-width: 33.33%; 
  }
}

@media (max-width: 400px) {
  .child {
    min-width: 50%; 
  }
}

jQuery

$("#add").on("click", function() {
  $("#parent").append("<div class='child' />");
});

How to make multiple inline-block elems to stretch full width of the container?

I like the answer of ScottS, but just to have an alternative: you could use table-like behaviour in CSS:

CSS

.formline{
    display: table;
}
.txt{
    display: table-cell;
    width: 100%;
}
input[type=text]{
    -moz-box-sizing: border-box; box-sizing: border-box;
    width: 100%;
}

HTML

<div class=formline>
    <div class=txt>
        <input type=text>
    </div>
    <input type=submit value=submit>
</div>

http://jsfiddle.net/willemvb/VaFSP/

Why Does Display:Block Not Stretch Buttons or Input Elements