CODEWITHSUNDEEP
htmlcss
Jun Yong
Jun Yong

Reputation: 29

what's the difference between styling using div and input itself?

As seen in the code below, there is class="fields" provided to div when there is already a class="input-fields" in the input element. Why can't we just choose and select one class, aren't they both doing the same thing if to style the input field?

Code:

.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>

Upvotes: 0

Views: 794

Answers (2)

claricetorres
claricetorres

Reputation: 128

It's not the same. In this case the div is a parent of the input and some properties on div are passed on to input but properties of input are not passed to div. It only affects input. For example:

/*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>

Both input and div have the same css properties. The first case we gave them to div and second case to input. And now you can see the difference and that they have the same effect, they just do the same thing to different tags with different inheritance.

Upvotes: 2

person
person

Reputation: 393

No. The fields class is only being used on the div element which means most properties you put in the fields tag will only be applied to the div element (though some attributes may be inherited by child elements).

Say you had a background: black; property in the fields class. This would only make the background of the div black and not the input field.

Upvotes: 0

Related Questions