Как я могу добавить отступ к текстовой области, не увеличивая ширину? - PullRequest
Новая
       42

Как я могу добавить отступ к текстовой области, не увеличивая ширину?

19 голосов
/ 15 ноября 2010

У меня были проблемы с настройкой ширины элемента textarea и использованием заполнения с помощью CSS.Значение отступа, похоже, меняет ширину текстовой области, что я бы предпочел не делать.

Это мой HTML-код: 

<div id="body">
    <textarea id="editor"></textarea>
</div>

И мой CSS-код: 

#body {
    height:100%;
    width:100%;
    display:block;
}

#editor {
    height:100%;
    width:100%;
    display:block;
    padding-left:350px;
    padding-right:350px;
}

Однако значения заполнения выглядят не так, как следовало ожидать.Ширина текстовой области увеличена на 350 пикселей в обоих направлениях, а не определяется пространство между границами элемента и его содержимого.

Я рассмотрел просто центрирование текстовой области, установив поля на «0px auto», но я бы хотел, чтобы пользователь по-прежнему мог прокручивать текстовую область, если указатель мыши находится над одним из пустых полей.По той же причине я не могу добавить еще один div для использования в качестве оболочки, так как пользователь не сможет прокручивать пустые области, а только вдоль текстовой области без полей.

Кто-нибудь может помочь?

Ответы [ 4 ]

50 голосов
/ 15 ноября 2010

Блочная модель CSS определяет "ширину" как ширину содержимого, исключая границы, отступы и поля.

К счастью, CSS3 имеет новое свойство box-sizing, которое позволяет вам изменить это поведение, чтобы вместо этого включать отступы и т. Д. В указанную ширину, используя: 

box-sizing: border-box;

Согласно ссылке выше, большинство современных браузеров (включая IE> = 8) поддерживают это свойство, но у них разные имена в каждом браузере.

1 голос
/ 24 февраля 2012

Указание ширины и полей / отступов в% помогает. Вот один пример -

Live @ http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body {
  background-color:#ccc;
  height:100%;
  width:100%;
  display:block;
}

textarea#editor {
  border:none;
  width:80%;
  height:100%;
  margin-left:10%;
  margin-right:10%;
}
0 голосов
/ 16 декабря 2017

В некоторых браузерах можно указывать местозаполнитель для изменения цвета и т. Д., Поэтому вы также можете добавить отступы: 

::-webkit-input-placeholder { /* WebKit browsers */
    padding: 5px 0 0 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    padding: 5px 0 0 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    padding: 5px 0 0 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    padding: 5px 0 0 5px;
}
0 голосов
/ 15 ноября 2010

Ширина, указанная CSS, не включает отступы или границы (в соответствии со спецификациями W3C). Я предполагаю, что один из способов сделать это с помощью некоторого JavaScript, который устанавливает ширину #editor равным ширине #body минус 700px, но это немного грязно ... Не уверен, что есть CSS способ сделать то, что вы хотите здесь. Конечно, вы можете использовать margin, затем зарегистрировать событие onMouseWheel для #body и работать с этим ...

...