CSS: จะเพิ่มพื้นที่สีขาวก่อนเนื้อหาขององค์ประกอบได้อย่างไร

รหัสต่อไปนี้ใช้ไม่ได้:

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

ฉันจะเพิ่มช่องว่างก่อนเนื้อหาขององค์ประกอบได้อย่างไร

หมายเหตุ: ฉันต้องการสีขอบซ้ายและขอบซ้ายสำหรับการใช้ความหมายและใช้ช่องว่างเป็นขอบที่ไม่มีสี :)

คุณสามารถใช้ Unicode ของพื้นที่ไม่ทำลาย:

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

ดูการสาธิต JSfiddle

[ปรับปรุงสไตล์โดย @Jason Sperske]

อย่าผายลมโดยใส่ช่องว่าง อย่างหนึ่ง IE เวอร์ชันเก่าจะไม่รู้ว่าคุณกำลังพูดถึงอะไร นอกจากนั้นแล้วยังมีวิธีที่สะอาดกว่าโดยทั่วไป

สำหรับการเยื้องที่ไม่มีสีให้ใช้text-indentคุณสมบัติ

p { text-indent: 1em; }

การสาธิต JSFiddle

แก้ไข:

หากคุณต้องการให้ช่องว่างเป็นสีคุณอาจพิจารณาเพิ่มเส้นขอบด้านซ้ายแบบหนาให้กับตัวอักษรตัวแรก (ฉันแทบจะไม่พูดว่า "แทน" เพราะการเยื้องอาจเป็นปัญหาได้ถ้าคุณใช้ทั้งสองอย่าง แต่ฉันรู้สึกสกปรกที่ต้องพึ่งพาเส้นขอบในการเยื้องเพียงอย่างเดียว) คุณสามารถระบุได้ว่าอยู่ห่างออกไปเท่าใด และความกว้างของสีโดยใช้ระยะขอบด้านซ้าย / ช่องว่าง / ความกว้างของขอบตัวอักษรตัวแรก

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

การสาธิต

เนื่องจากคุณกำลังมองหาการเพิ่มช่องว่างระหว่างองค์ประกอบคุณอาจต้องการบางสิ่งที่เรียบง่ายเช่นขอบซ้ายหรือขอบซ้าย นี่คือตัวอย่างของทั้งhttp://jsfiddle.net/BGHqn/3/

ซึ่งจะเพิ่ม 10 พิกเซลทางด้านซ้ายขององค์ประกอบย่อหน้า

p {
    margin-left: 10px;
 }

หรือถ้าคุณต้องการเพียงแค่ช่องว่างภายในองค์ประกอบย่อหน้าของคุณ

p {
    padding-left: 10px;
}

/* 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 */
}