Почему форматирование с выравниванием текста применяется только к первой строке внутри тега - PullRequest
Новая
       0

Почему форматирование с выравниванием текста применяется только к первой строке внутри тега

0 голосов
/ 30 марта 2020

В приведенном ниже коде html / css я пытаюсь применить одинаковый текстовый отступ к нескольким строкам в теге <p> через класс .code-box, используя text-indent. Однако только 1-я строка («строка кода 1») успешно применяет отступ текста.

Почему? Как мне это исправить? 

<html lang="en">
    <head>
        <style>
            .code-box {
                background-color: #f1f1f1;
                text-indent: 50px;
                text-align: left;
            }
        </style>
    </head>
    <body>
        <h1>Some big title</h1>
        <div>
            Some text explain the code below
            <p class="code-box">
                <code>
                    code line 1
                    <br />
                    code line 2 - why isn't this text indented like code line 1
                    <br />
                    code line 3 - same question
                </code>
            </p>
        </div>
    </body>
</html>

1 Ответ

2 голосов
/ 30 марта 2020

text-indent влияет только на первую строку абзаца, если вам нужны отступы для всех строк, почему бы просто не попробовать padding? 

<html lang="en">
    <head>
        <style>
            .code-box {
                background-color: #f1f1f1;
                /* use padding instead of text-indent */
                padding-inline-start: 50px;
                text-align: left;
            }
        </style>
    </head>
    <body>
        <h1>Some big title</h1>
        <div>
            Some text explain the code below
            <p class="code-box">
                <code>
                    code line 1
                    <br />
                    code line 2 - why isn't this text indented like code line 1
                    <br />
                    code line 3 - same question
                </code>
            </p>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...