01/10/2018, 01:18

Thẻ body có khoảng cách với html?

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

Pete Houston viết 03:22 ngày 01/10/2018

Do thằng h1 chưa được reset margin.

h1 {
  margin: 0;
}

Long Dragon viết 03:20 ngày 01/10/2018

Uầy, em tưởng margin của thẻ h1 không ảnh hưởng tới cái ul chứ anh ?

Pete Houston viết 03:32 ngày 01/10/2018

Uầy, em tưởng margin của thẻ h1 không ảnh hưởng tới cái ul chứ anh ?

ul đang là fixed ko bị ảnh hưởng. Còn những element nào ko phải fixed hoặc absolute thì bị đè layout.

Mặc định trình duỵệt Chrome có đặt margin cho h1 là 0.67em, h1 bị đẩy nên nó đẩy cả bố lẫn con trong bố cục.

Long Dragon viết 03:20 ngày 01/10/2018

bị đẩy nên nó đẩy cả bố lẫn con trong bố cục.

Em chưa hiểu câu này lắm, ul và li đâu có relative gì với thẻ h1 đâu anh ?

Hung Pham viết 03:26 ngày 01/10/2018

Cái Transition bây giờ ko phải thêm tiền tố -webkit hay -moz làm gì cả nó từ ngày xưa rồi, bây giờ các trình duyệt hỗ trợ hết rồi ko lo bị lỗi đâu và type=“text/css” cũng bỏ nốt đi bây giờ ko có tác dụng nữa.
Thẻ H1 margin: 0; nó sẽ hết.

Long Dragon viết 03:31 ngày 01/10/2018

Tks a Em thử post transition: 0.1s; lên trang autoprefixer thì thấy nó hiện cả webkit nên làm theo

A giúp e cái problem trên với

Hung Pham viết 03:19 ngày 01/10/2018

Còn cách sửa thứ 2 body wrap toàn bộ em thêm thuộc tính.
body {
border-top: 1px solid black(white);
}

Hung Pham viết 03:24 ngày 01/10/2018

Vd cụ thể:
I. Margin giữa 2 thuộc tính liền kề
h1 { margin: 0 0 25px 0; background: #cfc; } p { margin: 20px 0 0 0; background: #cf9; }

2 thuộc tính này sẽ không + vào nhau khi mình nghĩ là 45px mà chỉ 25 px thôi vì thằng margin lớn hơn sẽ lồng thằng nhỏ hơn vào. Nếu 2 thuộc tính giữa chúng là 20px thì khoảng cách giữa chúng là 20px thôi. vì 2 thàng nó lồng vào nhau

II.Margin giữa Phần tử mẹ và con
`

Heading Content

Paragraph content

Css nó là:
h1 { margin: 0; background: #cff; } div { margin: 40px 0 25px 0; background: #cfc; } p { margin: 20px 0 0 0; background: #cf9; }

Thẻ div và thẻ p nó sẽ không + vào nhau thành 60px mà chỉ thành 40px. Nếu muốn sửa e cho phải cho cái border-top và thẻ div để tạo khoảng cách giữa 2 thuộc tính sẽ thành tổng margin -top là 60px + 1px border
.