Helpex - Trao đổi & giúp đỡ
Đăng nhập
43

Tôi muốn chiều rộng và chiều cao của hộp bao gồm tất cả nội dung, phần đệm, chiều rộng đường viền và lề theo mặc định. Có cách nào để làm việc này không? Đặc biệt, tôi muốn có thể chỉ định một cái gì đó như width: 100%bao gồm tất cả mọi thứ cho đến lề.

43 hữu ích 5 bình luận 70k xem chia sẻ
5 trả lời 5
Viết câu trả lời
27

Đây là một câu hỏi mơ hồ, nhưng tôi sẽ trả lời tốt nhất có thể.

Lề, theo định nghĩa, là khu vực xung quanh bên ngoài hộp của bạn; nghĩa là không có cách nào để bao gồm các lề bên trong div của bạn.

Nếu bạn muốn có thêm phần đệm ở bên trong hộp của mình, nhưng bạn không muốn hộp thay đổi kích thước, hãy sử dụng: box-sizing:content-box;
Hoặc nếu bạn muốn bao gồm phần đệm và đường viền, hãy sử dụng:box-sizing:border-box;

Một giải pháp khả thi giúp duy trì kích thước của các div của bạn và loại bỏ phần tràn sẽ trông giống như sau:

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

<div id="parent">
   <div id="child"></div>
</div>

Chỉ cần đặt div mà bạn muốn tạo lề vào bên trong một div khác có đệm. Do đó tạo ra các lề giả.

27 hữu ích 2 bình luận chia sẻ
23

ví dụ nếu lề của bạn là 10px, bạn có thể sử dụng

width: calc(100% - 20px);
box-sizing: border-box;

hỗ trợ trình duyệt

tham khảo w3schools.com

23 hữu ích 0 bình luận chia sẻ
6

Đặt CSS box-sizingtài sản để border-boxlàm widthvà heightbao gồm các nội dung, biên giới, và padding. Điều này cho phép bạn thiết lập width: 100%và vẫn thêm paddinghoặc border. Nói cách khác, box-sizing: border-boxlàm cho widthbao gồm tất cả mọi thứ giữa các cạnh bên trong của lề. Không có cách nào để bao gồm ký quỹ theo cách như vậy.

.example { box-sizing: border-box; width: 100%; padding: 10px }

Tài liệu tham khảo hữu ích

6 hữu ích 2 bình luận chia sẻ
1

Có thể quấn một div khác xung quanh nó và chỉ định chiều rộng của div đó?

<div style="width: 100px; border: 1px solid blue;">
<div style="width: 100px; background:yellow; margin: 10px; border: 1px solid blue">
inner width 100px not including it's margin.
</div>
</div>

<div style="width: 100px; border: 1px solid blue">
<div style="background:yellow; margin: 10px; border: 1px solid blue">
  inner width's 100px including it's margin.
</div>
</div>
Mở rộng đoạn mã

1 hữu ích 0 bình luận chia sẻ
0

Sử dụng display: flex;cho thẻ mẹ.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  display: flex;   /* it can put children in one line */
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
  box-sizing: border-box
}

.right {
  border: 1px solid black;
  width: 80%;
  margin: 0 10px;
  float: left;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>
Mở rộng đoạn mã

0 hữu ích 1 bình luận chia sẻ
loading

Đăng nhập để trả lời câu hỏi

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading
Hoạt động
Liên quan
Mới tạo