Стилизация CSS кода - отсутствует цвет фона на пустых строках

Question

Я надеюсь, что это просто. Я не парень CSS

Я пытаюсь сделать код немного лучше в блоге, и у меня есть следующий <code> стиль CSS.

code {
        display: block;
        white-space:normal;
        background-color: #eeeeee;
        font: 1em, 'Courier New', Courier, Fixed;
        padding: 7px;
        margin: 7px 7px 7px 7px;
    }

Это работает нормально для меня, за исключением случаев, когда в коде, содержащемся в моем теге <code>, есть разрывы строк, цвет фона белый, а не светло-серый.

Можно ли настроить CSS, чтобы у всего моего блока <code> был серый цвет фона?

Спасибо.

Комментарий: если я поставлю пробел в пустой строке, я получу то, что хочу - серый фон в этой строке.

Комментарий2: внутри моих тегов <code> есть только простой текст. В идеале я не хочу размечать свой код с тегами. Просто вырезайте и вставляйте теги <code>, чтобы они выглядели прилично.

Заключительный комментарий: прочитав это , как предложено Меркатором ниже, я наконец-то пошел с этим Я вложил в тег <pre> и получил нужную информацию. Красиво заштрихованные прямоугольники, чтобы компенсировать мои примерные блоки кода.

 pre.code {
    color: black;
    border: solid 1px #eeeeee;
font-size: 1.1 em; 
margin: 7px; 
padding: 7px; 
background: #eeeeee
 }

Answer 1

Мне кажется, что он работает нормально, но тогда я не знаю, каково содержание ваших тегов <code>.

В любом случае в вашем CSS есть несколько странностей:

• Я бы, вероятно, не использовал display: block, но вместо этого обернул бы теги в <p> или <pre>. Изменение его на такой блок по-прежнему не позволит вам вкладывать в него теги уровня блока, и он все равно должен находиться внутри самого тега уровня блока. CSS не меняет синтаксис и семантику HTML. Есть ли у вас какие-либо теги уровня блока внутри ваших кодовых тегов?
• Почему вы установили white-space: normal? Это немного необычно для блока кода. Как именно вы форматируете свой код? Вы добавляете туда теги <p> или <br>? Почему бы вам не использовать white-space: pre или, возможно, white-space: pre-wrap?
• Ваша font декларация нарушена. Между 1em и названиями шрифтов не должно быть запятой. Браузеры теперь просто разбирают это, как будто 1em - это имя семейства шрифтов, я думаю, и затем возвращаются к Courier New, поскольку 1em не существует.
• Я думаю, что вы хотели сказать monospace вместо Fixed. Или Fixed фактическое имя шрифта? В любом случае лучше добавить monospace.
• Больше придирки: вы можете свернуть эти 4 поля до одного значения.

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

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

Полагаю, именно поэтому вы и добавили white-space: normal. Программное обеспечение блога уже добавляет разрывы строк и все автоматически (с тегами <p> и <br>), поэтому использование pre добавило кучу дополнительного пространства.

Попробуйте использовать комбинацию тегов <pre><code>, как это делает StackOverflow. Использование тега <pre> вероятно (надеюсь) предотвратит использование программного обеспечения блога в вашем коде.

Для WordPress взгляните на их статью " Написание кода в ваших сообщениях ."

Answer 2

Попробуйте установить явную ширину. Не уверен, почему это будет работать. Я иногда добавляю границу во время тестирования, чтобы увидеть, где находится мой бокс и как он выглядит. Я знаю, что вы можете сделать это с помощью веб-отладчиков, таких как firebug, иногда это проще и может даже иметь побочные эффекты.

добавить:

width: 100%;
border: 1px solid #eee;

Посмотрите, поможет ли это, возможно, измените цвет границы на # 000, чтобы увидеть, где находятся границы.

Answer 3

Без некоторого HTML и / или тестовой страницы довольно сложно понять, что может вызвать проблему. Я бы посмотрел на свойство line-height - оно часто вызывает подобные проблемы.