Ігноруйте батьківські прокладки

127

Я намагаюся отримати своє горизонтальне правило, щоб ігнорувати батьківські накладки.

Ось простий приклад того, що я маю:

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

Ви побачите, що горизонтальне правило поширюється поза батьківським на 10 пікселів. Я намагаюся змусити його ігнорувати прокладки, які потребує все інше у батьківському діві.

Я усвідомлюю, що я міг зробити окремий поділ для всього іншого; це не рішення, яке я шукаю.

html css

— Сем
джерело

160

Просто виправити, просто зробити

margin:-10px

на год.

— Сем
джерело

9

Це працює, але проблема полягає в тому, що він не збільшить повну довжину батьківського діла. Це тому, що прокладка НЕ включена в ширину 100 пікселів, це означає, що вона насправді шириною 120 пікселів, а ваш <hr>кінець буде 20 пікселів з кінця вашого діва. Дивіться цей jsFiddle про те, що я маю на увазі: jsfiddle.net/YVrWy/1

— Alastair Pitts

Так, я розробив це, коли додав його; ширина не має значення.

— Сем

22

якщо вам потрібна 100% ширина, просто використовуйте auto як атрибут width. Ширина буде розрахована відносно заданих меж.

— schlingel

4

Ви повинні зробити щось на кшталт ... margin: 0 -15px; ..... інакше hr буде вертикально смоктати сусідній вміст до нього.

— honkskillet

своєрідний хакіш.

— Хотілося б,

29

З метою зображення ви можете зробити щось подібне

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

— adriancho5692
джерело

8

Але що робити, якщо ви не обов'язково знаєте батьківські набивки?

1

Це працювало для мене, коли я використовую міні-ширину, а не просто ширину.

— Педро Надольний

@ user5707327 ви завжди можете комбінувати стилі з javascript, щоб отримати батьківську підкладку

— adriancho5692

вау, геніальне використання негативних ширин!

— Містер PizzaGuy

9

В основному на це питання відповіли всі, але невеликими частинами. Я займався цим лише хвилину тому.

Мені хотілося, щоб у нижній частині панелі був лоток з кнопками, де панель має 30 пікс. Лоток для кнопок повинен бути внизу і з боків.

.panel
{
  padding: 30px;
}

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

Я зробив тут демонстрацію з більшою плоттю, щоб рухати ідею. Однак ключові елементи, наведені вище, компенсують будь-яку батьківську підкладку з відповідними негативними полями на дитині. Тоді найважливіше, якщо ви хочете запустити дитину на повну ширину, тоді встановіть ширину для автоматичного. (як згадується в коментарі вище від schlingel ).

— Мітчелл Гере
джерело

7

Щось пізно. Але це просто вимагає трохи математики.

.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>

У мене немає Windows, тому я не перевіряв цього в IE.

скрипка: приклад скрипки ..

— sqram
джерело

1

Ви повинні розділити padding-right: 60px to padding-left: 30px; padding-right: 30px, щоб вміст не змістився під час використання text-align: center;

— Лука

3

margin: 0 -10px;

краще, ніж

margin: -10px;

Пізніше всмоктується вміст вертикально.

— бадилля
джерело

2

Ваш батько шириною 120 пікселів - це 100 шириною + 20 прокладок з кожного боку, тому вам потрібно зробити лінію шириною 120 пікселів. Ось код. Наступного разу зауважте, що набивання додає ширину елементів.

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

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

— пасвей
джерело

1

З заданою шириною легко. Проблема полягає в тому, коли ти не знаєш ширини

— Гільерме Феррейра

@GuilhermeFerreira Використовувати width: auto;в hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 На жаль, для цього рішення все ж потрібні знання, paddingвстановлені батьком.

— ToolmakerSteve

1

Проблема може звестись до того, яку модель коробки ви використовуєте. Ви використовуєте IE?

Коли IE знаходиться в режимі диваків, widthце зовнішня ширина вашої коробки, що означає, що підкладка буде знаходитися всередині. Таким чином, загальна площа, що залишилася всередині поля, 100px - 2 * 10px = 80pxу такому випадку ваша ширина 100 пікселів <hr>не буде виглядати праворуч.

Якщо ви перебуваєте в стандартному режимі, widthце внутрішня ширина вашої коробки, а накладка додається зовні. Таким чином, загальна ширина поля 100px + 2 * 10px = 120pxзалишає рівно 100 пікселів всередині коробки для вашого <hr>.

Щоб вирішити це, будь-коли відрегулюйте значення CSS для IE. (Перевірте у Firefox, щоб побачити, чи добре там виглядає). Або ще краще, встановіть тип документа, щоб перевести браузер у суворий режим - де також IE дотримується стандартної моделі коробки.

<!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

Якщо у вас є батьківський контейнер з вертикальною прокладкою, і ви хочете, щоб щось (наприклад, зображення) всередині цього контейнера ігнорувало його вертикальне накладення, ви можете встановити негативну, але рівну, граничну для "верхнього" і "нижнього":

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

Фактичне значення, мабуть, не має великого значення. Я не пробував цього для горизонтальних прокладок.

— Marnix.hoh
джерело

0

легко виправити .. додати до батьківського div:

розмір коробки: бордюр;

— Жаклін У
джерело

0

Ось ще один спосіб зробити це.

<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>

Ось кілька прикладів на repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Діллон Бернетт
джерело