A CSS margin does not work as expected in my HTML - html

Question

div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
height: 300px;
width: 300px;
margin-right: 0px;
margin-top: 0px;
}
.div3 {
height: 150px;
width: 150px;
margin-left: 0px;
margin-bottom: 0px;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
In above code I have a confusion, because in above code the margin was not affected to the inner div tags. What might be the problem?
Image of output
and what I want to do is
Desired output

Answer 1

No need to use margin , just use position property.
Here is the Snippet.
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position: relative;
margin: 30px auto;
}
.div2 {
height: 300px;
width: 300px;
position: absolute;
top: 0;
right: 0;
}
.div3 {
height: 150px;
width: 150px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="div1">
<div class="div2">
<div class="div3"> </div>
</div>
</div>

Answer 2

To achieve the desired o/p with margin this should be your code
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
height: 300px;
width: 300px;
margin-left: 300px;
margin-top: 0px;
}
.div3 {
height: 150px;
width: 150px;
margin-left: 0px;
margin-top: 150px;
}
But, this would be a wrong approach, the right approach is to manipulate positioning the inner divs to left or right. This is because of the concept of box model. You learn more about box-model to better understand when to use margin-l/r/t/b and when to use positioning
Correct Code :
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position : relative;
}
.div2 {
height: 300px;
width: 300px;
position : absolute;
right : 0;
}
.div3 {
height: 150px;
width: 150px;
position : absolute;
bottom : 0;
}

Answer 3

You can use a combination of float and position: relative/absolute settings in the combination and with the settings shown below to achieve the desired result shown in your image.
Note: All this has nothing to do with margins.
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
float: right;
position: relative;
height: 300px;
width: 300px;
}
.div3 {
height: 150px;
width: 150px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>

Answer 4

You can use position: absolute; and then in place of margin-left or margin-top use left or top or bottom
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position: relative;
}
.div2 {
height: 300px;
width: 300px;
right: 0px;
top: 0px;
position: absolute;
}
.div3 {
height: 150px;
width: 150px;
left: 0px;
bottom: 0px;
position: absolute;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
Hope this helps