CSS - Отрицательная маржа для удаления родительского отступа

Question

Является ли хорошей практикой использование отрицательных полей для удаления заполнения элемента обертки?

Например, какой из следующих кусков кода лучше использовать?

<div style="padding: 5px;">
 Shortened width string
 <div style="margin: 0 -5px;">Full width string</div>
 Shortened width string
</div>

или

<div>
 <div style="padding: 5px;">Shortened width string</div>
 <div>Full width string</div>
 <div style="padding: 5px;">Shortened width string</div>
</div>

Answer 1

Почему бы просто не объявить padding:5px 0;, чтобы у вас не было горизонтального отступа? Хотя я бы сказал, что использовать отрицательные поля совершенно нормально, для этого они и созданы, но если вы можете избежать их в первую очередь, сделайте это.

Answer 2

отрицательное поле его скрыть div .... Вот трюк использовать зум: 1, положение: относительное

Вот пример

Проблема:

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}

в красной области IE панели инструментов div прячется. даже если мы используем масштабирование: 1. чтобы избавиться от этой проблемы, нам нужно добавить положение: относительное тоже.

Решение:

так что ваш класс CSS станет

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}

Answer 3

Второй намного лучше. Следует избегать отрицательных полей, потому что они могут вызвать проблемы в IE.

Answer 4

Ну, это граничит с тем, что ты хак. Пока это используется со сдержанностью, я бы сказал, что все в порядке. Главное, чтобы его было легко читать и понимать. Добавьте комментарии, если вам нужно.