CSS: як додати пробіл перед вмістом елемента?

118

Жоден із наведених нижче кодів не працює:

p:before { content: " "; }
p:before { content: "&nbsp;"; }

Як додати пробіл перед вмістом елемента?

Примітка. Мені потрібно розфарбувати лівий кордон та край ліворуч для семантичного використання та використовувати простір як безбарвне поле. :)

— Гюгольпз
джерело

5

Чому б не просто додати просту маржу.

— Cam

5

Може тому, що маржа / прокладка впливає на весь блок. текст-відступ стане кращим вибором

— приємна дупа

Мені потрібно розфарбувати лівий кордон і поле зліва для семантичного використання :) Можу також додати кілька element:before { content:"[a kind of space]"; background: mycolor;}. Всіма способами я хотів знати спосіб додавання пробілів, свого роду веселощів!

— Гюгольпз

1

@Hugolpz: Ви могли зробити в основному те саме p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

Поле @carn статичне, ширина простору відносно розміру шрифту

— Не любить

248

Ви можете використовувати unicode нерозривного простору:

p:before { content: "\00a0 "; }

Див. Демонстрацію JSfiddle

[стиль удосконалений @Jason Sperske]

— Гюгольпз
джерело

2

Я зробив невелику редагування, щоб ви побачили, що це ефект: jsfiddle.net/uMFHH/3 (інакше це просто схоже на маржу, що викликає гарне питання, чому б не просто додати маржу?)

— Джейсон Сперський,

Тому що мені потрібно розфарбувати кордон ліворуч та полем ліворуч :)

— Хугольпз

3

Чому простір в кінці "\00a0 "? Це потрібно чи ми можемо просто зробити "\00a0"?

— jbyrd

1

@jbyrd: не потрібно (див. jsfiddle.net/nhyw6e9q ). Я залишив його там, щоб показати, що нормальний простір не враховується.

— Гюгольпз

40

Не бійтеся навколо, вставляючи пробіли. Для однієї, старіші версії IE не знають, про що ви говорите. Крім того, хоча існують і більш чисті способи.

Для безбарвних відступів використовуйте text-indentвластивість.

p { text-indent: 1em; }

Демонстрація JSFiddle

Редагувати:

Якщо ви хочете, щоб простір був кольоровим, ви можете додати до першої літери товсту ліву рамку. (Я майже, але не зовсім кажу, "натомість", тому що відступ може бути проблемою, якщо ви використовуєте обидва. Але мені стає брудно покладатися виключно на кордон до відступу.) Ви можете вказати, як далеко , і наскільки широкою є колір із використанням лівого поля / ширини / рамки першої літери.

p:first-letter { border-left: 1em solid red; }

Демо

— cHao
джерело

2

Якщо ви застрягли в підтримці IE <8, цей метод буде працювати, поки до / після псевдоелементів не буде.

— cimmanon

1

@cimmanon: Так. Згідно з MDN, це працює навіть в IE 3 (хоча я навіть не розумів, що вони мали CSS тоді: P).

— cHao

Ви не можете забарвити такі відступи { text-indent: 1em; }. Але ми можемо забарвити такий простір :before {content: "\00a0 "; background: #000; }. Дивіться

— Fiddle

1

@Hugolpz: Текстовий відступ? Ні. не може забарвитись по-іншому, AFAIK. Але кордон? Звичайно. :)

— cHao

О, ми не можемо додати кілька вмісту, див. Fiddle . Шкода ...

— Гюгольпз

8

Оскільки ви шукаєте для додавання простору між елементами, вам може знадобитися щось таке просте, як поле зліва або набивання зліва. Ось приклади обох http://jsfiddle.net/BGHqn/3/

Це додасть 10 пікселів зліва від елемента абзацу

p {
    margin-left: 10px;
 }

або якщо ви просто хочете трохи прокладки всередині елемента абзацу

p {
    padding-left: 10px;
}

— Метт
джерело

5

/* Most Accurate Setting if you only want
   to do this with CSS Pseudo Element */
p:before { 
   content: "\00a0";
   padding-right: 5px; /* If you need more space b/w contents */
}

— Піюш
джерело