Tình hình là e đang tập tành làm 1 cái menu. Bài đầu tiên là làm vertical menu, tức là menu theo chiều dọc. Source code như sau:
Source HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="./test3.css" />
</head>
<body>
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Services">Services</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
<div class="paragraph">
<h1>HEADING</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut magna erat. Fusce vel ligula sit amet sapien congue aliquam ac quis sapien. Duis sed suscipit nunc, sit amet consectetur lectus. Mauris ac felis orci. Phasellus augue erat, consectetur nec enim in, facilisis scelerisque purus. Ut quis suscipit diam. Sed porta sed augue nec tristique. Nulla et ultricies libero. Quisque non arcu dictum lorem elementum elementum. Maecenas consectetur tempus risus porttitor tincidunt. Proin fermentum mauris quis molestie congue. Nam efficitur commodo elementum. Nunc ornare eleifend tortor vitae ornare. Quisque consectetur ut libero non tristique.</p><p>Integer eget commodo purus. Sed leo velit, sollicitudin a est id, rutrum convallis quam. Duis nunc neque, feugiat nec justo sit amet, rhoncus blandit ligula. Mauris et ex sem. Ut suscipit euismod est. Vestibulum id semper purus. Nulla laoreet vitae mi vitae cursus. Integer euismod vitae diam vel venenatis. Vivamus vitae orci eu justo elementum accumsan in non massa.</p><p>Cras in vestibulum lacus. Sed ut leo eget nisi mattis ornare. Integer posuere lacus a nibh finibus rutrum. Praesent facilisis nisl sed sollicitudin pulvinar. Etiam nec lacinia erat. Ut ultrices dui nulla, eu hendrerit odio aliquet a. Pellentesque eget nunc quis libero mollis vestibulum id sed turpis. Suspendisse pellentesque placerat sapien id imperdiet. Sed enim dui, tristique in erat a, iaculis ultrices erat. Donec iaculis augue vitae ullamcorper auctor. Quisque eget massa at metus volutpat convallis aliquam ac massa. Aenean vitae luctus dolor. Sed ac enim lorem. Donec et libero malesuada, faucibus leo sit amet, lobortis sem. Duis accumsan libero sit amet justo dapibus consectetur.</p><p>Fusce ut diam eros. Suspendisse rutrum libero ac pretium ornare. Integer tincidunt viverra augue eu aliquet. Quisque ullamcorper tristique turpis, id tempor sapien ultricies et. Quisque non ultricies augue, ut ultricies quam. Sed dolor erat, tincidunt vel leo non, elementum pharetra lorem. Pellentesque ut nunc in odio viverra dictum et a ligula. Morbi non faucibus lorem. Vestibulum eleifend ipsum non metus ullamcorper viverra. Nunc vestibulum gravida lacus sit amet ultricies. Vestibulum mattis odio mauris, eget viverra leo vulputate ac. Aliquam condimentum, felis scelerisque finibus molestie, nulla orci pretium purus, in gravida turpis justo vitae turpis. Fusce sed cursus turpis, a congue libero.</p><p>Vivamus efficitur nulla et blandit mattis. Aenean eu ornare velit. Cras cursus urna quis odio ullamcorper consequat. Phasellus sed erat congue, dignissim neque sed, faucibus lorem. Integer vel maximus erat. Phasellus purus elit, vestibulum non arcu quis, venenatis luctus magna. Morbi vitae fermentum metus. Nam ac dictum nunc. Sed ac ultrices velit. Nulla finibus sit amet eros ut maximus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut magna erat. Fusce vel ligula sit amet sapien congue aliquam ac quis sapien. Duis sed suscipit nunc, sit amet consectetur lectus. Mauris ac felis orci. Phasellus augue erat, consectetur nec enim in, facilisis scelerisque purus. Ut quis suscipit diam. Sed porta sed augue nec tristique. Nulla et ultricies libero. Quisque non arcu dictum lorem elementum elementum. Maecenas consectetur tempus risus porttitor tincidunt. Proin fermentum mauris quis molestie congue. Nam efficitur commodo elementum. Nunc ornare eleifend tortor vitae ornare. Quisque consectetur ut libero non tristique.</p><p>Integer eget commodo purus. Sed leo velit, sollicitudin a est id, rutrum convallis quam. Duis nunc neque, feugiat nec justo sit amet, rhoncus blandit ligula. Mauris et ex sem. Ut suscipit euismod est. Vestibulum id semper purus. Nulla laoreet vitae mi vitae cursus. Integer euismod vitae diam vel venenatis. Vivamus vitae orci eu justo elementum accumsan in non massa.</p><p>Cras in vestibulum lacus. Sed ut leo eget nisi mattis ornare. Integer posuere lacus a nibh finibus rutrum. Praesent facilisis nisl sed sollicitudin pulvinar. Etiam nec lacinia erat. Ut ultrices dui nulla, eu hendrerit odio aliquet a. Pellentesque eget nunc quis libero mollis vestibulum id sed turpis. Suspendisse pellentesque placerat sapien id imperdiet. Sed enim dui, tristique in erat a, iaculis ultrices erat. Donec iaculis augue vitae ullamcorper auctor. Quisque eget massa at metus volutpat convallis aliquam ac massa. Aenean vitae luctus dolor. Sed ac enim lorem. Donec et libero malesuada, faucibus leo sit amet, lobortis sem. Duis accumsan libero sit amet justo dapibus consectetur.</p><p>Fusce ut diam eros. Suspendisse rutrum libero ac pretium ornare. Integer tincidunt viverra augue eu aliquet. Quisque ullamcorper tristique turpis, id tempor sapien ultricies et. Quisque non ultricies augue, ut ultricies quam. Sed dolor erat, tincidunt vel leo non, elementum pharetra lorem. Pellentesque ut nunc in odio viverra dictum et a ligula. Morbi non faucibus lorem. Vestibulum eleifend ipsum non metus ullamcorper viverra. Nunc vestibulum gravida lacus sit amet ultricies. Vestibulum mattis odio mauris, eget viverra leo vulputate ac. Aliquam condimentum, felis scelerisque finibus molestie, nulla orci pretium purus, in gravida turpis justo vitae turpis. Fusce sed cursus turpis, a congue libero.</p><p>Vivamus efficitur nulla et blandit mattis. Aenean eu ornare velit. Cras cursus urna quis odio ullamcorper consequat. Phasellus sed erat congue, dignissim neque sed, faucibus lorem. Integer vel maximus erat. Phasellus purus elit, vestibulum non arcu quis, venenatis luctus magna. Morbi vitae fermentum metus. Nam ac dictum nunc. Sed ac ultrices velit. Nulla finibus sit amet eros ut maximus.</p>
</div>
</body>
</html>
Source CSS:
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #D7DADB;
position: fixed;
width: 15%;
height: 100%;
top: 0;
left: 0;
}
li a {
display: block;
text-decoration: none;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: black;
}
li a.active {
background-color: #16C439;
color: white;
}
li a:hover:not(.active) {
background-color: #324235;
color: white;
transition: 0.1s;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
}
div {
margin-left: 25%;
padding-right: 5%;
}
Và đây là kết quả:
Nhìn thì có vẻ ổn nhưng khi em inspect thì thấy như sau:
Rõ ràng là trong code CSS em đã set cho body margin: 0; rồi mà tại sao khi chọn thẻ body thì trình duyệt là hiển thị thẻ body có khoảng cách ở phía trên?
Thank mọi người nhiều 
Em thử post 
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?