Вопросы Теги

Край H1 неожиданно переполняет контейнер [дубликат]

Имейте в виду, что независимо от сценария причина всегда одинакова в .NET:

Вы пытаетесь использовать ссылочную переменную, значение которой Nothing / null. Если для ссылочной переменной значение Nothing / null, это означает, что на самом деле оно не содержит ссылку на экземпляр любого объекта, который существует в куче.

Вы либо никогда не присваивали какую-либо переменную, никогда не создавали экземпляр значения, присвоенного переменной, или вы вручную устанавливали переменную, равную Nothing / null, или вы вызывали функцию, которая установите для этой переменной значение Nothing / null.

321
задан Robert Koritnik 19 November 2009 в 12:23
поделиться

14 ответов

Найден альтернативу в дочерних элементах с полями внутри DIVs Вы также можете добавить: 

.parent { overflow: auto; }

или: 

.parent { overflow: hidden; }

Это предотвращает поля свернуть . Граница и прокладка делают то же самое. Следовательно, вы также можете использовать следующее для предотвращения краха верхнего края: 

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Обновление по популярному запросу: весь смысл сворачивания полей - обработка текстового содержимого. Например: 

<style type="text/css">
    h1, h2, p, ul {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<h1>Title!</h1>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
</div>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
    <ul>
        <li>list item</li>
    </ul>
</div>

Поскольку браузер обрушивает поля, текст будет выглядеть так, как вы ожидали, а теги-теги <div> не влияют на поля. Каждый элемент гарантирует, что он будет располагаться вокруг него, но расстояние не будет удвоено. Поля <h2> и <p> не будут складываться, а скользят друг в друга (они рушится). То же самое происходит и с элементами <p> и <ul>.

К сожалению, с современными проектами эта идея может укусить вас, когда вы явно хотите контейнер. Это называется новым блоком форматирования контекста в CSS говорят. Этот трюк overflow или margin даст вам это.

392
ответ дан Community 28 August 2018 в 11:23
поделиться
  • 1
    .parent {overflow: auto; } прекрасно работает – Jay Dave 15 October 2012 в 17:12
  • 2
    Я хочу знать, почему это происходит, что хорошо для любого. В какой ситуации эта «особенность» должна была быть. – Muhammad Umer 14 March 2013 в 16:47
  • 3
    Не могли бы вы привести пример. Пусть говорят, что у меня div как фон. С h1, h2 и p в нем. Теперь я хочу немного переместить h1, так что он не так близок к вышеупомянутому краю фона div, но не расширяет сам элемент h1. Я думаю, что добавит верхнюю маржу. Это очевидно. но когда я это делаю, славный фон решает спуститься с ним. Как это особенность. Как это помогает в промежутке между h1, h2 и p. Помогите мне понять, что вы говорите. – Muhammad Umer 17 March 2013 в 21:24
  • 4
    я бы ожидал, что он добавит больше прибыли. Коллапсирующая маржа - самая неприятная вещь в моей карьере развития. если я помещаю 2 divs друг в друга с margin: 5px 10px; id, ожидаем 2 divs 5 px сверху и 20px между ними не 5 px от вершины и 10px между ними. если бы я хотел 10 px между ними, ID указал margin: 5px 5px;. я честно желаю, чтобы существовало корневое правило, которое я мог бы разместить, чтобы остановить все крах. я ненавижу, что мне нужно удвоить размер полей на бумаге, чтобы заставить их на самом деле делать то, что я хочу на экране. и это главное ... что за бедствие – JL Griffin 28 October 2015 в 21:07
  • 5
    плюс в соответствии с вашим примером того, почему добавление div в мой текст добавляет margin, его просто: .div-in-text{ margin: 0;} и <div class="div-in-text"></div> – JL Griffin 28 October 2015 в 21:09

margin элементов, содержащихся в .child, сжимаются. 

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

В этом примере p получает margin из стилей по умолчанию браузера. Браузер по умолчанию font-size обычно 16px. Имея margin-top более 16px на #child, вы начинаете замечать, что это перемещение позиции.

1
ответ дан 25thhour 28 August 2018 в 11:23
поделиться

Это нормальное поведение (по крайней мере, среди реализаций браузера). Маржа не влияет на положение ребенка по отношению к ее родительскому объекту, если только родительский элемент не имеет дополнения, и в этом случае большинство браузеров затем добавят к нему дочерние поля.

Чтобы получить нужное поведение, вы need: 

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}
44
ответ дан Ben James 28 August 2018 в 11:23
поделиться
  • 1
    Добавление границы к родительскому элементу повлияет на верхнюю границу поля ребенка, попробуйте .parent {border: solid 1px;} – o.k.w 19 November 2009 в 12:17
  • 2
    Спасибо чувак. Я нашел его в спецификации: w3.org/TR/CSS2/box.html – Robert Koritnik 19 November 2009 в 13:50
  • 3
    Маржа не добавляется к заполнению ... она применяется отдельно. Но визуальный эффект тот же. – Brilliand 26 May 2011 в 23:27
  • 4
    Что делать, если вы хотите получить максимальную маржу ...? На самом деле это не решение. – feeela 16 June 2011 в 19:44
  • 5
    Как сказал ребята, это не решение, если требуется максимальный запас. Ответ vdboor лучше подходит. – Joey Morani 8 April 2012 в 00:07

Чтобы предотвратить использование «родительского родителя» поля «div child»: в родительском режиме используйте css:

  • Float
  • Padding
  • Border
  • Переполнение
0
ответ дан bingo 28 August 2018 в 11:23
поделиться

добавить стиль display:inline-block к дочернему элементу

11
ответ дан Code Lღver 28 August 2018 в 11:23
поделиться

Хотя все ответы устраняют проблему, но у них есть компромиссы / корректировки / компромиссы, такие как

  • floats, у вас есть для флота элементов
  • border-top. Это подталкивает родителя по крайней мере на 1px вниз, а затем его следует корректировать, вводя маркер -1px в сам родительский элемент. Это может создать проблемы, когда у родителя уже есть margin-top в относительных единицах.
  • padding-top, тот же эффект, что и при использовании border-top
  • overflow: hidden, не может использоваться, когда родительский должен отображать переполненный контент, например выпадающее меню
  • overflow: auto, вводит полосы прокрутки для родительского элемента, который имеет (намеренно) переполняющий контент (например, тени или треугольник подсказки)

Проблема может быть решена с использованием псевдо-элементов CSS3 следующим образом 

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

14
ответ дан Ejaz 28 August 2018 в 11:23
поделиться
  • 1
    margin-top: -1px кажется ненужным. Но мне это нравится. – Flimm 23 December 2015 в 11:34
  • 2
    Собственно, обе margin-top: -1px и height: 0 кажутся ненужными. Протестировано в Chrome. Но лучшее решение. – NinjaFart 11 November 2016 в 16:11
  • 3
    Этот метод работает в основном, но не будет соблюдать нижний предел для последнего элемента в контейнере. Это не равное исправление переполнения: hidden; например. – Michael Giovanni Pumo 13 November 2017 в 12:40
  • 4
    @MichaelGiovanniPumo ответ может быть изменен для работы с нижним полем последнего элемента с помощью .parent:after... – Ejaz 13 November 2017 в 16:48

Это то, что сработало для меня 

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

6
ответ дан erdomester 28 August 2018 в 11:23
поделиться

родительский элемент не должен быть пустым, по крайней мере, поставить &nbsp; перед дочерним элементом.

6
ответ дан George SEDRA 28 August 2018 в 11:23
поделиться
  • 1
    да, иногда только это может помочь ... или лучше поставить что-то вроде этого: & lt; div style = 'width: 0; height: 0' & gt; & nbsp; & lt; / div & gt; – Pigalev Pavel 6 October 2013 в 14:51

Использование top вместо margin-top - другое возможное решение, если это необходимо.

0
ответ дан lamplightdev 28 August 2018 в 11:23
поделиться

Альтернативное решение, которое я нашел, прежде чем я понял, что правильным ответом было добавление прозрачной границы к родительскому элементу.

Ваша коробка будет использовать дополнительные пиксели, хотя ... 

.parent {
    border:1px solid transparent;
}
1
ответ дан SandRock 28 August 2018 в 11:23
поделиться

интересно мое любимое решение этой проблемы еще не упомянуто здесь: использование float.

html: 

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

css: 

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

см. здесь: http://codepen.io/anon/pen/Iphol

обратите внимание, что если вам нужна динамическая высота для родителя, она также должна плавать, поэтому просто замените height:100px; на float:left;

1
ответ дан schellmax 28 August 2018 в 11:23
поделиться

Я узнаю, что внутри вашего .css> если вы установите свойство display элемента div в встроенный блок, он исправляет проблему. и маржа будет работать, как ожидается.

1
ответ дан vincent thorpe 28 August 2018 в 11:23
поделиться

Нейтральное решение только для CSS

Используйте следующий код, чтобы добавить непредвиденного первого ребенка к непреднамеренно движущемуся div: 

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

Преимущество этого метода заключается в том, что вы не нужно менять CSS любого существующего элемента и, следовательно, оказывает минимальное влияние на дизайн. Рядом с этим добавленный элемент является псевдоэлементом, который является not в DOM-дереве.

Поддержка псевдоэлементов широко распространена: Firefox 3 +, Safari 3+, Chrome 3+, Opera 10+ и IE 8+. Это будет работать в любом современном браузере (будьте осторожны с новым ::before, который не поддерживается в IE8).

Контекст

Если у первого дочернего элемента элемента есть margin-top, родитель отрегулирует свое положение как способ сбрасывания избыточных полей. Зачем? Это также так.

Учитывая следующую проблему: 

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

Вы можете исправить ее, добавив ребенка с контентом, например, простое пространство. Но мы все ненавидим добавлять пробелы для того, что является проблемой только для дизайна. Поэтому используйте свойство white-space для подделки содержимого. 

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Где position: relative; обеспечивает правильное позиционирование исправления. И white-space: pre; заставляет вас не добавлять какой-либо контент - например, пробел - к исправлению. И height: 0px;width: 0px;overflow: hidden; гарантирует, что вы никогда не увидите исправление.

Вам может потребоваться добавить line-height: 0px; или max-height: 0px;, чтобы гарантировать, что высота в нуле в старых браузерах IE (я не уверен) , И, возможно, вы могли бы добавить <!--dummy--> к нему в старых браузерах IE, если это не сработает.

Короче говоря, вы можете сделать все это только с помощью CSS (что устраняет необходимость добавления фактического ребенка в HTML DOM-дерево): 

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>
0
ответ дан Yeti 28 August 2018 в 11:23
поделиться

У меня тоже была эта проблема, но я предпочитал предотвращать негативные маркеры, поэтому я помещаю в нее

<div class="supercontainer"></div>

все, у которого есть paddings вместо полей. Конечно, это означает больше девитов, но, вероятно, это самый чистый способ сделать это правильно.

1
ответ дан Zyl 28 August 2018 в 11:23
поделиться