Hướng dẫn css remove padding from parent - css loại bỏ đệm khỏi cha mẹ

Tôi đang cố gắng để có được quy tắc theo chiều ngang của mình để bỏ qua phần đệm cha 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 quy tắc ngang mở rộng ra khỏi cha mẹ bằng 10px. Tôi đang cố gắng để nó bỏ qua phần đệm mà mọi thứ khác trong Div cha mẹ cần.

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

Hỏi ngày 28 tháng 11 năm 2010 lúc 11:32Nov 28, 2010 at 11:32

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

margin:-10px

trên nhân sự.

Đã trả lời ngày 28 tháng 11 năm 2010 lúc 11:39Nov 28, 2010 at 11:39

Sam SamSam

6.1988 Huy hiệu vàng31 Huy hiệu bạc62 Huy hiệu Đồng8 gold badges31 silver badges62 bronze badges

6

Đố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
}

Đã trả lời ngày 10 tháng 8 năm 2017 lúc 13:27Aug 10, 2017 at 13:27

3

Nói chung câu hỏi này đã được trả lời nhưng trong những phần nhỏ của 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 có bảng điều khiển có 30px xung quanh. Khay nút phải là đáy và các cạnh.

.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 để thúc đẩy ý tưởng này. Tuy nhiên, các yếu tố chính ở trên là bù đắp bất kỳ phần đệm cha mẹ nào với tỷ suất lợi nhuận âm với trẻ. Sau đó, quan trọng nhất nếu bạn muốn chạy đứa trẻ toàn chiều rộng thì đặt chiều rộng thành tự động. (Như đã đề cập trong một nhận xét ở trên của Schlingel).

Đã trả lời ngày 29 tháng 8 năm 2015 lúc 7:26Aug 29, 2015 at 7:26

David Geeredavid GeereDavid Geere

3844 Huy hiệu bạc10 Huy hiệu đồng4 silver badges10 bronze badges

0

Giải pháp khác:

position: absolute;
top: 0;
left: 0;

Chỉ cần thay đổi đầu/bên phải/dưới/bên trái sang trường hợp của bạn.

Đã trả lời ngày 21 tháng 8 năm 2020 lúc 18:02Aug 21, 2020 at 18:02

GohchigohchiGohchi

1591 Huy hiệu bạc10 Huy hiệu đồng1 silver badge10 bronze badges

Kinda muộn. Nhưng nó chỉ cần một chút 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 */
}



  
A paragraph
  
Another paragraph.
  
No more content


  

      I want this div to ignore padding.
  

Tôi không có cửa sổ nên tôi không kiểm tra điều này trong IE.

Fiddle: Ví dụ về fiddle ..

Đã trả lời ngày 7 tháng 1 năm 2013 lúc 20:19Jan 7, 2013 at 20:19

Sqramsqramsqram

6.8998 Huy hiệu vàng46 Huy hiệu bạc63 Huy hiệu Đồng8 gold badges46 silver badges63 bronze badges

1

Nếu bạn có một thùng chứa cha mẹ có đệm thẳng đứng và bạn muốn một cái gì đó (ví dụ: hình ảnh) bên trong container đó bỏ qua phần đệm thẳng đứng của nó, bạn có thể đặt một lề âm, nhưng bằng nhau cho cả 'trên cùng' và 'dưới cùng':

margin-top: -100px;
margin-bottom: -100px;

Giá trị thực tế dường như không quan trọng nhiều. Không thử điều này cho các mái chèo ngang.

Đã trả lời ngày 5 tháng 4 năm 2020 lúc 15:36Apr 5, 2020 at 15:36

Marnix.hohMarnix.hohMarnix.hoh

1.25411 huy hiệu bạc22 Huy hiệu đồng11 silver badges22 bronze badges

margin: 0 -10px; 

tốt hơn

margin: -10px;

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

Đã trả lời ngày 4 tháng 3 năm 2015 lúc 1:23Mar 4, 2015 at 1:23

Honkskillethonkskillethonkskillet

2.8174 Huy hiệu vàng31 Huy hiệu bạc47 Huy hiệu đồng4 gold badges31 silver badges47 bronze badges

Đây là một cách khác để làm điều đó.

Dưới đây là một số ví dụ về repl.it: https://repl.it/@bryku/lightgraybleakintercept

Đã trả lời ngày 11 tháng 11 năm 2019 lúc 4:17Nov 11, 2019 at 4:17

Cha mẹ của bạn rộng 120px - đó là 100 chiều rộng + 20 đệm ở mỗi bên, vì vậy bạn cần phải làm cho dòng 120px của bạn rộng 120px. Đây là mã. Lần tới lưu ý rằng phần đệm tăng lên đến chiều rộng phần tử.

margin:-10px

0

Đã trả lời ngày 28 tháng 11 năm 2010 lúc 12:19Nov 28, 2010 at 12:19

Easweeasweeeaswee

15.4K24 Huy hiệu vàng58 Huy hiệu bạc82 Huy hiệu đồng24 gold badges58 silver badges82 bronze badges

2

Nếu bạn sau một cách để HR đi thẳng từ phía bên trái của màn hình sang bên phải thì đây là mã để sử dụng để đảm bảo chiều rộng xem không được thực hiện.

margin:-10px

1

Đã trả lời ngày 14 tháng 11 năm 2020 lúc 19:28Nov 14, 2020 at 19:28

Vấn đề có thể đi xuống mô hình hộp nào bạn đang sử dụng. Bạn đang sử dụng IE?

Khi IE ở chế độ kỳ quặc,

margin:-10px

3 là chiều rộng bên ngoài của hộp của bạn, điều đó có nghĩa là phần đệm sẽ ở bên trong. Vì vậy, tổng diện tích còn lại bên trong hộp là

margin:-10px

4 trong trường hợp đó rộng 100px

margin:-10px

5 của bạn sẽ không đúng.

Nếu bạn ở chế độ tiêu chuẩn,

margin:-10px

3 là chiều rộng bên trong của hộp của bạn 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à

margin:-10px

7 để lại chính xác 100px bên trong hộp cho

margin:-10px

5 của bạn.

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

margin:-10px

2

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

Đã trả lời ngày 28 tháng 11 năm 2010 lúc 12:16Nov 28, 2010 at 12:16

Martin Algestenmartin AlgestenMartin Algesten

12.5k3 Huy hiệu vàng52 Huy hiệu bạc77 Huy hiệu đồng3 gold badges52 silver badges77 bronze badges

sửa chữa dễ dàng .. Thêm vào cha mẹ div:

Kích thước hộp: Hộp biên;

Đã trả lời ngày 15 tháng 10 năm 2019 lúc 16:15Oct 15, 2019 at 16:15

Jaclyn Ujaclyn uJaclyn U

6555 Huy hiệu bạc2 Huy hiệu Đồng5 silver badges2 bronze badges

0

Làm thế nào để bạn loại bỏ đệm cha mẹ từ một đứa trẻ?

Làm thế nào để bạn ghi đè lên đệm trong CSS?

Làm thế nào để bạn tạo một phần đệm tiêu cực trong CSS?

Làm thế nào để ký quỹ hoạt động CSS?