Bỏ qua phần đệm gốc

127

Tôi đang cố gắng lấy quy tắc ngang của mình để bỏ qua phần đệm cha.

Đâ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 trang gốc 10px. Tôi đang cố gắng làm cho nó bỏ qua phần đệm mà mọi thứ khác trong div 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.

html css

— Sam
nguồn

160

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

margin:-10px

vào giờ.

— Sam
nguồn

9

Điều này hoạt động, nhưng vấn đề là nó sẽ không mở rộng độ dài đầy đủ của div cha. Điều này là do phần đệm 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ính từ cuối div của bạn. Xem jsFiddle này để biết ý tôi là gì: jsfiddle.net/YVrWy/1

— Alastair Pitts,

Vâng, tôi đã làm việc đó khi tôi thêm nó vào; chiều rộng không liên quan.

— Sam

22

nếu bạn cần chiều rộng 100%, chỉ cần sử dụng thuộc tính auto as width. Chiều rộng sẽ được tính toán đối với các lề đã cho.

— schlingel

4

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ề theo chiều dọc về phía nó.

— honkskillet

kinda hackish. Rất mong có một cách tốt hơn

— Oldboy

29

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

— adriancho5692
nguồn

8

Nhưng nếu bạn không nhất thiết phải biết đệm của cha mẹ thì sao?

1

Điều này đã làm việc cho tôi khi tôi sử dụng chiều rộng tối thiểu, thay vì chỉ chiều rộng.

— Pedro Nadolny 20/1218

@ user5707327 bạn luôn có thể kết hợp phong cách với javascript để có được của cha mẹ đệm

— adriancho5692

wow, cách sử dụng thiên tài của độ rộng âm!

— Mr PizzaGuy

9

Nói chung câu hỏi này đã được trả lời nhưng một phần nhỏ bởi mọi người. Tôi đã giải quyết đ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 bảng điều khiển, nơi bảng điều khiển có 30px xung quanh. Khay nút phải phẳng ở đáy và hai 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 cơ sở 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 nào có biên âm phù hợp với phần con. Sau đó, quan trọng nhất nếu bạn muốn chạy toàn bộ chiều rộng con thì hãy đặt chiều rộng thành tự động. (như đã đề cập trong một bình luận ở trên của schlingel ).

— Mitchell Geere
nguồn

7

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 */
}

<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 nên tôi đã không kiểm tra điều này trong IE.

fiddle: ví dụ fiddle ..

— sqram
nguồn

1

Bạn nên chia padding-right: 60px thành padding-left: 30px; padding-right: 30px, để nội dung không bị lệch khi bạn sử dụng text-align: center;

— Luke

3

margin: 0 -10px;

tốt hơn

margin: -10px;

Càng về sau, nội dung càng hút vào đó.

— honkskillet
nguồn

2

Cha mẹ của bạn có chiều rộng 120px - tức là 100 chiều rộng + 20 phần đệm ở mỗi bên, vì vậy bạn cần tạo đường thẳng của mình rộng 120px. Đây là mã. Lần tới, hãy lưu ý rằng phần đệm thêm vào chiều rộng phần tử.

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

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

— lễ phục sinh
nguồn

1

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

— Guilherme Ferreira

@GuilhermeFerreira Sử dụng width: auto;trong hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Thật không may, giải pháp này vẫn yêu cầu paddingthiết lập của cha mẹ.

— ToolmakerSteve

1

Vấn đề có thể do bạn đang sử dụng mẫu hộp nào. Bạn đang sử dụng IE?

Khi IE ở chế độ quirks, widthlà chiều rộng bên ngoài của hộp của bạn, 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à 100px - 2 * 10px = 80pxtrường hợp rộng 100px của bạn<hr> sẽ không giống với.

Nếu bạn đang ở chế độ tiêu chuẩn, widthlà chiều rộng bên trong hộp của bạn và phần đệm được thêm bên ngoài. Vì vậy, tổng chiều rộng của hộp 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 các 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, đặt một loại tài liệu để đưa trình duyệt vào chế độ nghiêm ngặt - nơi IE cũng tuân 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

— Martin Algesten
nguồn

1

Nếu bạn có một vùng chứa mẹ với phần đệm dọc và bạn muốn thứ gì đó (ví dụ: hình ảnh) bên trong vùng chứa đó bỏ qua phần đệm dọc 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 lắm. Chưa thử điều này cho đệm ngang.

— Marnix.hoh
nguồn

0

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

box-sizing: border-box;

— Jaclyn U
nguồn

0

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

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

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

— Dillon Burnett
nguồn