Câu hỏi Bỏ qua phần đệm mẹ


Tôi đang cố gắng để có được quy tắc ngang của tôi để bỏ qua các phụ huynh đệm.

Đây là một ví dụ đơn giản về những gì tôi có:

#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}

Bạn sẽ thấy rằng các quy tắc ngang kéo dài ra khỏi cha mẹ bởi 10px. Tôi đang cố gắng để có được nó để bỏ qua padding rằng mọi thứ khác trong div cha mẹ cần.

Tôi biết rằng tôi có thể tạo ra một div riêng biệt cho mọi thứ khác; đây không phải là giải pháp mà tôi đang tìm kiếm.


76
2017-11-28 11:32


gốc




Các câu trả lời:


Dễ dàng sửa chữa, chỉ cần làm

margin:-10px

vào giờ.


103
2017-11-28 11:39



Điều này làm việc, nhưng vấn đề là nó sẽ không kéo dài toàn bộ chiều dài của div cha. Điều này là do padding KHÔNG được bao gồm trong chiều rộng 100px, điều này có nghĩa là nó thực sự rộng 120px và <hr> sẽ là 20px từ cuối div của bạn. Xem jsFiddle này cho những gì tôi có ý nghĩa: jsfiddle.net/YVrWy/1 - Alastair Pitts
Tôi đã làm việc đó khi tôi thêm nó vào; chiều rộng là không thích hợp. - Sam
nếu bạn cần 100% chiều rộng chỉ cần sử dụng tự động là thuộc tính chiều rộng. Chiều rộng sẽ được tính toán đối với các lề đã cho. - schlingel
Bạn nên làm một cái gì đó như ... margin: 0 -15px; ..... nếu không thì giờ sẽ hút nội dung liền kề về phía nó. - honkskillet
@schlingel bạn có ý gì? jsfiddle.net/YVrWy/123 - adam-beck


Kinda late.But nó chỉ mất một chút của toán học.

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

Tôi không có Windows vì vậy tôi đã không kiểm tra điều này trong IE.

vĩ cầm: ví dụ fiddle ..


7
2018-01-07 20:19



Bạn nên chia padding-right: 60px để padding-left: 30px; padding-right: 30px, sao cho nội dung không được bù đắp khi bạn sử dụng text-align: center; - Luke


Đối với mục đích hình ảnh, bạn có thể làm một cái gì đó như thế này

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}

7
2017-08-10 13:27





Trong lớn câu hỏi này đã được trả lời nhưng trong phần nhỏ của tất cả mọi người. Tôi xử lý điều này chỉ một phút trước.

Tôi muốn có một khay nút ở dưới cùng của một bảng điều khiển nơi bảng điều khiển có tất cả 30px xung quanh. Các nút khay phải được tuôn ra dưới và bên.

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

Tôi đã làm một bản demo đây với nhiều xác thịt hơn để thúc đẩy ý tưởng. Tuy nhiên, các yếu tố chính ở trên được bù đắp bất kỳ phần đệm cha mẹ nào có lề trái tiêu cực trên con. Sau đó, quan trọng nhất nếu bạn muốn chạy con đầy đủ chiều rộng sau đó thiết lập chiều rộng để tự động. (như đã đề cập trong một bình luận ở trên bởi schlingel).


6
2017-08-29 07:26





Vấn đề có thể xảy ra với mô hình hộp bạn đang sử dụng. Bạn đang sử dụng IE?

Khi IE ở chế độ quirks, width là chiều rộng bên ngoài của hộp, có nghĩa là phần đệm sẽ nằm bên trong. Vì vậy, tổng diện tích còn lại bên trong hộp là 100px - 2 * 10px = 80px trong trường hợp này rộng 100px của bạn <hr> sẽ không nhìn đúng.

Nếu bạn đang ở chế độ tiêu chuẩn, width là chiều rộng bên trong của hộp và phần đệm được thêm vào bên ngoài. Vì vậy, tổng chiều rộng của hộp là 100px + 2 * 10px = 120px để lại chính xác 100px bên trong hộp cho <hr>.

Để giải quyết nó, hãy điều chỉnh giá trị CSS của bạn cho IE. (Kiểm tra trong Firefox để xem nó có ổn không). Hoặc thậm chí tốt hơn, thiết lập một loại tài liệu để kick trình duyệt vào chế độ nghiêm ngặt - nơi mà IE cũng theo mô hình hộp tiêu chuẩn.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html


1
2017-11-28 12:16





Cha mẹ của bạn rộng 120px - có chiều rộng 100 + 20 đệm ở mỗi bên, do đó bạn cần phải tạo đường rộng 120px. Đây là mã. Thời gian tiếp theo lưu ý rằng padding thêm lên đến chiều rộng phần tử.

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

1
2017-11-28 12:19



Với chiều rộng được xác định là dễ dàng. Vấn đề là khi bạn không biết chiều rộng - Guilherme Ferreira


margin: 0 -10px; 

tốt hơn

margin: -10px;

Sau đó hút nội dung theo chiều dọc vào nó.


0
2018-03-04 01:23