Vấn đề margin và padding trong html-css

Nơi các thành viên thảo luận các vấn đề liên quan HTML & CSS
Trả lời
Hình đại diện của người dùng
Lê Bá Minh
Bài viết: 1
Ngày tham gia: T.Bảy Tháng 12 30, 2017 10:50 pm

T.Bảy Tháng 12 30, 2017 10:56 pm

mọi người xem giúp mình phần border của tag <li> sao lại cách phần border của class block một khoảng là sao nhỉ?

code HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.block{
text-align: center;
background-color: aqua;
border: 1px solid red;
}
.menu{
list-style-position: inside;
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
}
li{
text-align: center;
padding:10px 0px;
width: 100px;
border: 1px solid green;
height: 40px;
box-sizing: border-box;
float: left;
}

</style>
</head>

<body>
<div class="block">
<ul class="menu">
<li>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
</div>
</body>
</html>

result:
Tập tin đính kèm
Capture.PNG
kết quả hiển thị
Capture.PNG (166.19 KiB) Đã xem 54 lần

Hình đại diện của người dùng
hieu9495
Bài viết: 1
Ngày tham gia: T.Sáu Tháng 1 05, 2018 3:52 pm

T.Sáu Tháng 1 05, 2018 3:57 pm

li{
text-align: center;
padding:10px 0px;
width: 100px;
border: 1px solid green;
height: 40px;
box-sizing: border-box;
display: inline-block;
}
bạn thử xem

Hình đại diện của người dùng
neit
Bài viết: 1
Ngày tham gia: T.Tư Tháng 4 12, 2017 9:01 pm

T.Ba Tháng 1 09, 2018 6:07 pm

Mã: Chọn hết

* {
     margin: 0px;
     padding: 0px;
}
 .block {
     text-align: center;
     background-color: aqua;
     border: 1px solid red;
}
 .menu {
     list-style-position: inside;
     list-style-type: none;
     margin: 0px auto;
     padding: 0px;
     height: 40px;
     width: 400px;
}
 li {
     text-align: center;
     padding:10px 0px;
     width: 100px;
     border: 1px solid green;
     box-sizing: border-box;
     float:left;
}
Vấn đề của bạn là thẻ ul bạn sử dụng dipslay: inline-block trong cặp thẻ ul - li nó sẽ tạo ra 1 khoảng trắng bên phải và phía dưới phần tử. được inline-block. Đơn giảnn nhất bạn thêm thuộc tính vertical-align: bottom; vào thẻ ul.menu là được.
Phía trên của mình để giải quyết vấn đề của bạn mà mình cảm thấy hợp lý. Khi các thẻ li sử dụng thuộc tính float thì phần tử cha ul sẽ bị mất chiều cao do đó chiều cao của nó bằng 0. Mà thẻ div có class là block bên ngoài, không set height, width thì height, width của nó phụ thuộc vào height, width của thằng con trực tiếp của nó ở đây là thẻ ul. Mà thẻ ul có height bằng 0 nên thẻ div ngoài sẽ có height = 0 + 2 border = 2. Do đó mình set height cho thẻ ul , không set height cho thẻ li, vì khi đó các thẻ li sẽ mặc định có height, width là inherit nghĩ là kế thừa height, width của thằng cha. Nhưng khi đó nó vẫn chưa canh giữa, set thuộc tính margin: 0 auto, để canh giữa. Canh giữa được là do thẻ ul bạn có width nên trình duyệt sẽ tự động margin trái và phải để đều nhau .( Cái này là trình duyệt tự tính).
Còn theo cách của bạn hieu9495 thì lúc đó vẫn bị 1 khoảng trắng 4 - 5px giữa các phần tử li. Với cách này chỉ cần margin-right:-5px là được.

Trả lời
  • Thông tin
  • Đang trực tuyến

    Đang xem chuyên mục này: Không có thành viên nào trực tuyến.1 khách