Почему css margin-right не эффективен на angular 8 с ясностью-ui?

Правило css для правого поля, похоже, неэффективно в angular 8 с системой четкого дизайна. Подробности см. Ниже.

У меня есть проект angular 8 с наглядной системой дизайна. Я установил его с заголовком и вертикальной навигацией, как показано на снимке экрана ниже:

В области содержимого я экспериментирую с некоторыми css.
Проблема: настройка полей для правил ниже не работает справа.

styles.component.css:

.xxx {
    border: 2px solid #e7642c;
    width: 200px;
    margin: 10px;
    padding: 10px;}
h2, p {
    width: 200px;
    font-size: 80%;
    line-height: 1.4em;}

styles.component.html:

<div class="xxx">
  <h2>Moog</h2>
  <p>Moog synthesisers were created by Dr. Robert Moog under the company name Moog Music. Popular models include the
    Moog Modular, Minimoog, Micromoog, Moog Rogue, and Moog Source.</p>
</div>

снимок экрана: см. правое поле высыпано
(источник: ebe.co.ke)

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


angular css vmware-clarity
person goremo    schedule 30.07.2019    source источник
comment
Не устанавливайте фиксированную ширину для внутренних элементов, таких как h2 и p. Вместо этого используйте width:100%.   -  person Arpit Kumar    schedule 30.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы указали ширину: 200 пикселей; в теги h2 и p

вместо этого вы можете попробовать это

.xxx {
    border: 2px solid #e7642c;
    width: 200px;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}
h2, p {
    width: 100%;
    font-size: 80%;
    line-height: 1.4em;
}

Свойство CSS box-sizing позволяет нам включать отступы и границу в общую ширину и высоту элемента.

person Soothran    schedule 30.07.2019
comment
Спасибо Сотрану, я только что попробовал ваше предложение, и оно сработало. NB. Я пробовал использовать css-снипет из книги: ссылка. стр.307. - person goremo; 30.07.2019