2013-08-31 3 views
18

Я работаю над унаследованным проектом, который имеет Сброс CSS с *{ margin:0; padding:0 }, применимым ко всему. Теперь мой новый код не нуждается в этом, поскольку он полагается на Normalize.css. Это не было большой проблемой, но в некоторых местах мне нужно использовать оба стиля.Как сделать заполнение: авто работать в CSS?

Как отключить мой CSS? Я смог сделать *{margin:auto}, который отлично работает. То же самое относится и к прописке. Есть ли эквивалентный способ сброса заполнения. Как вы решаете это?

+0

первую очередь дополнения: авто; ничто .. и, во-вторых, на то, что вы меняете, вы можете дать! важно использовать этот в каждом случае – nsthethunderbolt

+0

возможный дубликат [HTML/CSS: Сброс списка по умолчанию] (http://stackoverflow.com/questions/5561101/html-css-reset-list-padding-to-default) – Scottie

+0

@nsthethunderbolt Я не могу использовать! важно, потому что я работаю над отзывчивым дизайном и, таким образом, используя! важно, может сделать что-то действительно трудным с медиа-запросами –

ответ

19

auto не является допустимым значением для padding собственности, единственное, что вы можете сделать, это вынуть padding: 0; из * декларации, иначе просто присвоить padding к соответствующему блоку свойств.

Если удалить padding: 0; из * {}, чем браузер будет применять стили по умолчанию для ваших элементов, которые будут давать вам неожиданные смещения поперечного позиционирования браузера на несколько пикселей, так что лучше назначить padding: 0; с помощью * и чем, если вы хотите, чтобы переопределить отступы , просто используйте другое правило, такое как

.container p { 
    padding: 5px; 
} 
+0

Я не хочу удалять 'padding: 0', потому что это будет иметь проблемы с ранее выполненным устаревшим кодом. Я думаю, что единственными вариантами являются добавление дополнения, если это необходимо, поскольку он не может быть отменен, как маржа. –

+0

@VaibhavKanwal да, как я и предложил –

2

Вы должны просто указать свой * селектор на конкретные области, требующие сброса. .legacy * { } и т.д.

+0

, мы обычно устанавливаем 'margin: 0; padding: 0' on 'body', поэтому вложенные элементы просто наследуют это, вышеупомянутое будет работать только в том случае, если вы не зададите' margin: 0; заполнение: 0' to body –

1

Самое простое решение состоит в поддержке либо использовать маржа

.element { 
    display: block; 
    margin: 0px auto; 
} 

Или использовать второй контейнер вокруг элемента, который имеет этот запас применяется. Это будет иметь значение padding: 0px auto, если оно действительно существует.

CSS

.element_wrapper { 
    display: block; 
    margin: 0px auto; 
} 
.element { 
    background: blue; 
} 

HTML

<div class="element_wrapper"> 
    <div class="element"> 
    Hello world 
    </div> 
</div> 
Смежные вопросы