HTML & CSS
https://www.w3schools.com/jquery/jquery_get_started.asp
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
----------------------------------------------------------------------
Box sizing // box-sizing: border-box & content-box
...................................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:200px;
height:50px;
margin: 10px;
background-color: lightblue;
padding:20px;
border: 10px solid black;
}
.contentBox{
box-sizing: content-box;
}
.borderBox{
box-sizing:border-box
}
</style>
</head>
<body>
<div class="contentBox">
content box
</div>
<div class="borderBox">
content box
</div>
</body>
</html>
------------------------------------------------------------------------------------------------
https://www.w3schools.com/html/html_blocks.asp
Block level elements
....................................
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form>
<h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
....................................
Inline elements
....................................
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object>
<output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
..................................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 3px solid blue;
margin-top: 100px;
}
span{
border: 3px solid blue;
margin-top: 100px;
margin-left: 20px;
// display: block -->make inline to block
}
</style>
</head>
<body>
<div>block element</div>
<div>block element</div>
<span>inline element</span>
<span>inline element</span>
</body>
</html>
-----------------------------------------------------------------------------------------------
#footer {
background-color: white;
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
left: 0;
margin-top: 100px;
}
<div id="footer" class="border-top">
<div class="container text-center">
© 2022 - ASP.NET Core7 <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</div>
#parent_div{
width:400px;
height:400px;
background-color: red;
margin:100px;
position: relative;
}
#child_div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 20px;
right: 40px;
}