Установите маржу слева и справа налево и сохраните вертикальное поле

Есть ли способ установить горизонтальный запас и наследовать вертикальный запас? Другой способ, чем установить margin-left и margin-right? Я надеялся на что-то вроде margin: inherit 20px; на работу.Установите маржу слева и справа налево и сохраните вертикальное поле

Проверьте это здесь: https://jsfiddle.net/cm8kwfok/1/

Html:

<div class="outer"> 
    <div class="inner horizontal-margin-working"> 
     Working but lame 
    </div> 
    <div class="inner horizontal-margin-notworking"> 
     Not working 
    </div> 
</div>

Css: Космический { фона: # 27ae60; обивка: 10px; }

.inner { 
    margin: 10px; 
} 

.horizontal-margin-working { 
    margin-left: 50px; 
    margin-right: 50px; 
} 

.horizontal-margin-notworking { 
    margin: inherit 50px; 
}

источник

2016-06-08 Martin Gottweis

Заменить 'inherit'' auto'. – Roy

Эй, это действительно работает. Не могли бы вы разместить его в качестве ответа, чтобы я мог его принять? –

@MartinGottweis: Нет, это не так. Если вы внимательно осмотрите элемент, вы увидите, что 'auto' отличается (попробуйте увеличить значение« margin: 10px', чтобы сказать 100px). 'auto' установил бы« margin-top »и« margin-left »на какое-то подходящее значение, основанное на вычислениях, но не на 10px (что я предполагаю, это то, что вы намеревались на основе * keep * вертикальной отметки. Если не потом, извините, мой ошибка). – Harry

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

В CSS, когда для элемента применяются два или более селектора, значения, которые предоставляются в последнем селекторе (или более конкретном селекторе), выигрывают для общих свойств. Здесь margin предоставляется как в .inner, так и в другом классе, и в пределах .inner будет получен перезаписан.
inherit (вместе с указанием длины) не представляется действительным для стенографии margin, тогда как оно относится к свойствам longhand margin-* и когда только inherit указано в сокращении. Более того, margin: 10px установлен в селекторе .inner, который фактически является тем же самым элементом (а не родительским), поэтому inherit не будет работать.
auto является допустимым значением для margin но не держать запас, указанный в предыдущем селекторе. Он сообщает UA рассчитать и присвоить подходящее значение. Для вашего случая он может установить margin-top и margin-bottom на 10px, но он может также не отличаться (в зависимости от других факторов).
Если для свойства margin задано какое-либо значение длины (пиксель или процент), UA принимает решение о том, как интерпретировать заданное значение на основе no. предоставленных значений. Если предусмотрено одно значение, которое устанавливается со всех сторон, 2 значения означают, что сначала вертикально, а второе - горизонтальное поле и так далее.

Так, короче говоря, перекрывая margin-left и margin-right специально (как в .horizontal-margin-working) является единственным способом вы можете получить держать вертикальный край.

источник

2016-06-08 05:54:25 Harry

Спасибо, хороший ответ –

вместо использования margin:inherit 50px;

использовать как такое использование

.horizontal-margin-notworking { 
    margin-top: inherit; 
    margin-bottom: inherit; 
    margin-left: 50px; 
    margin-right: 50px; 

}

источник

2016-06-08 05:25:28 Mani

как этот

<style> 
.outer { 
    background: #27ae60; 
    padding: 10px; 
} 

.inner { 
    margin: 10px; 
} 

.horizontal-margin-working { 
    margin-left: 50px; 
    margin-right: 50px; 
} 

.horizontal-margin-notworking { 

margin-top: inherit; 
margin-bottom: inherit; 
margin-left: 50px; 



} 

</style> 
<div class="outer"> 
    <div class="inner horizontal-margin-working"> 
    Working but lame 
    </div> 
    <div class="inner horizontal-margin-notworking"> 
    Not working 
    </div> 
</div>

источник

2016-06-08 05:49:09 SMS

Установите маржу слева и справа налево и сохраните вертикальное поле

ответ

Смежные вопросы