Where is the difference between CSS Margin property and offset properties?


#1

.box-bottom {
background-color: DeepSkyBlue;
position: relative;
top: 20px;
left: 50px;
}


#2

Save this code on your computer as margin-vs-offset.html then navigate to it and click to open in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin vs offset</title>
<style>
body {
  font-size: 100%;
}
#no1, #no2 {
  position: relative;
  width: 50%;
  height: 300px;
  border: 2px solid red;
  margin: 75px auto;
}
#no1 div{
  margin: 50px 50px;
  height: 300px;
  border: 2px solid blue;
}
#no2 div{
  position: relative;
  top: 50px;
  left: 50px;
  height: 300px;
  border: 2px solid green;
}
</style>
</head>
<body>
<div id="no1">
<div></div>
</div>
<div id="no2">
<div></div>
</div>
</body>
</html>

Study the two examples and we can take it up some more.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.