В чем разница между стилем с использованием div и самим вводом?

Question

Как видно из приведенного ниже кода, в div предоставляется class = "fields", когда в элементе input уже есть class = "input-fields". Почему мы не можем просто выбрать и выбрать один класс, разве они не делают одно и то же, если стилизовать поле ввода?

Код:

.fields {
  display: inline-block;
  text-align: left;
  width: 48%;
  vertical-align: middle;
}

.input-fields {
  height: 20px;
  width: 280px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
}

<div class="fields">
  <input type="text" id="name" class="input-fields" placeholder="Enter your name" required>
</div>

Answer 1

Это не то же самое. В этом случае div является родительским для ввода, и некоторые свойства div передаются на ввод, но свойства ввода не передаются в div. Это влияет только на ввод. Например:

/*first case: div has background color and input has not*/
/*all these properties are set for the first div and affects the input (padding and text-align)*/
.firstDiv {
  height: 100px;
  background-color: lightblue;
  text-align: center;
  padding: 30px;
}

/*second case: input has background color and div has not*/
/*I'll copy all the properties on firstDiv and use on seconInput to see what happens*/
.secondInput{
  height: 100px;
  background-color: lightblue;
  text-align: center;
  padding: 30px;
}

<div class="firstDiv"><input type="text" class="firstInput" placeholder="I am first input"></div>
<div class="secondDiv"><input type="text" class="secondInput" placeholder="I am second input"></div>

И input, и div имеют одинаковые свойства css. В первом случае мы передали их в div, а во втором - для ввода. И теперь вы можете видеть разницу и то, что они имеют одинаковый эффект, они просто делают одно и то же с разными тегами с разным наследованием.

Answer 2

Нет. Класс fields используется только в элементе div, что означает, что большинство свойств, которые вы помещаете в тег fields, будут применяться только к элементу div (хотя некоторые атрибуты могут быть унаследованы дочерними элементами).

Допустим, у вас есть свойство background: black; в классе полей. Это позволит только сделать черный фон div, а не поле ввода.