Input With Display:Block Is Not a Block, Why Not

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)

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

Display block is not aligning my label elements above my input elements?

1.) Make the margin-lefton the label to be 15% (which is half of the rest of 100% full width minus 70% width of the inputelement).

2.) Add box-sizing: border-box to the ìnput`in order to include the left and right padding and the border in the 70% width calculation:

html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: block;
  width: 100%;
  margin-top: 6%;
  margin-left: 15%;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
  box-sizing: border-box;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>

CSS display:block not working

I think you mean input fields are not displaying as blocks. If so you need wrap your input fields in divs like that

<section class="body">
   <form method="post" action="index.php">
      <div>
         <label>Name</label>
         <input name="name" placeholder="Type Here">
      </div>
      <div>
         <label>Email</label>
         <input name="email" type="email" placeholder="Type Here">
      </div>
      <div>
         <label>Message</label>
         <textarea name="message" placeholder="Type Here"></textarea>
      </div>
      <div>
         <label>*What is 2+2? (Anti-spam)</label>
         <input name="human" placeholder="Type Here">
      </div>
      <div>
         <input id="submit" name="submit" type="submit"
            value="Submit">
      </div>
   </form>
</section>

and write this css code for divs

div, .body {
  width:576px;
  margin:0 auto;
  display:block;
}

label {
    display: inline-block;
    width: 20%
}

the result you can check here

Strange behavior of an input html element with display: block

If you don't want the padding on a grid parent element to effect its children, surround all its children elements in a block element with a class of row.

Bootstrap input elements are meant to span the whole width of there parent elements even without display block style attribute.

<div class="col-md-12">
  <div class="row"> <!--this is what you need -->

  </div>
</div>

full example code

<div class="col-md-12">
    <div class="row">
        <input type="text" placeholder='I\'m some damned input' />
    </div>
    <div class="row">
        <div>I am some div</div>
    </div>
</div>

Why is display block not working on input field focus?

First, both your CSS examples mean (you must read them from right to left):
"apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".

In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).

But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.

How to find the input value according to the display : block in jquery

You can do it using a siblings selector or using a filter(function) that checks siblings length

var inputValue = $('.span1:visible ~ .span2:visible').siblings('input').val();
console.log('Using siblings selector: ', inputValue)

// OR
var inputValue2 = $('td input').filter(function(){
    return $(this).siblings('span:visible').length === 2;
}).val();
console.log('Using filter: ', inputValue2)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input value="input1">
      <span class="span1" style="display:none">span1</span>
      <span class="span2" style="display:block">span2</span>
  </tr>
  <tr>
    
    <td>
      <input value="input2">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:none">span2</span>
    </td>
  </tr>
  <tr>
    <td>
      <input value="input3">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:block">span2</span>
    </td>
  </tr>
  <tr>
    <td>
      <input value="input4">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:block">span2</span>
    </td>
  </tr>
</table>

How to display block the last part of flex?

Take the <p> out of .input-group class.

By doing this, <p> will have a full width by default.

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group>.input-group-prepend>.input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.input-group>.form-control {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" placeholder="username" class="form-control">
</div>

<!-- take the p tag out of input-group -->
<p class="text-muted mb-0 small">アエイオウ</p>

Input With Display:Block Is Not a Block, Why Not