CSS Box Model: Padding-CodePudding

Task 1: Set padding of div element with id 'div-1' to 30px.

Task 2: Set padding-top and padding-bottom of div element with id 'div-2' to 40px in a single statement.

Task 3: Set padding-bottom and padding-left of div element with id 'div-3' to 15px and 25px respectively.

CodePudding user response：

NB: Code only CSS part

#div-1 {
background-color: red;
padding:30px;
}

#div-2 {
background-color: orange;
padding-top:40px;
padding-bottom:40px;
}

#div-3 {
background-color: green;
padding-bottom:15px;
padding-left:25px;
}

CodePudding user response：

I don't know what are you trying to do but this is the result of what you want.

#div-1 {padding:30px;

}

#div-2 {padding: 40px 0px 40px 0px;

}

#div-3 {padding: 0px 0px 15px 25px;
}

<div id="div-1">div1</div>
<div id="div-2">div2</div>
<div id="div-3">div3</div>

CodePudding user response：

div {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 10px 0;
}

.div-1 {
  padding: 30px;
}

.div-2 {
  padding: 40px 0;
}

.div-3 {
  padding: 0 0 15px 25px;
}

<div >div-1</div>
<div >div-2</div>
<div >div-3</div>