Làm cách nào để mô phỏng <br/> (thẻ br) bằng cách sử dụng CSS?

Question

Tôi có dòng sau của css và html ở đây:

CSS:

.top, .title { 
font-weight: bold; 
} 
.bottom, .Content { 
} 

HTML:

<span class='title'>Title</span> 
<br/> 
<span class='Content'>Content</span> 
<br/><br/> 

Tôi muốn thay thế thẻ <br/> với một tương đương trong CSS, nhưng Tôi đang đấu tranh với nó. Tôi sẽ đánh giá cao sự giúp đỡ nào.

Tôi đã thử lề dưới, lề trên, chiều cao dòng, không có biểu tượng nào hoạt động.

Answer 1

<span> là một yếu tố nội tuyến, vì vậy không thể có margin áp dụng, nhưng nó có thể mất padding - cung cấp cho nó một cái gì đó giống như .title { padding: 10px 0; } và nó sẽ mô phỏng một đoạn, hoặc chỉ .title { display: block; } để buộc các điều tiếp theo để đi bên dưới nó.

Answer 2

sử dụng display:block; trên span,

như:

.title, .Content { display:block; } 

Answer 3

Vâng, vấn đề là bạn đang sử dụng một "nhịp cầu", đó là một thẻ inline. Bạn phải sử dụng phần tử khối để có thể sử dụng margin-bottom chẳng hạn.

Bạn có thể thử này:

.top { 
    font-weight: bold; 
    display: block; 
} 
.bottom { 
    display: block; 
} 

Hoặc bạn cũng có thể sử dụng display: inline-block;

Answer 4

display: block; tuy nhiên, <span> là ngữ nghĩa có thể là thẻ sai để sử dụng (là thẻ nội tuyến thay vì thẻ chặn); <div> có lẽ là một kết hợp tốt hơn và đi kèm với phần thưởng mà nó đã hiển thị dưới dạng một khối. Các thẻ khác có thể vẫn phù hợp hơn.

Answer 5

Ngữ nghĩa, bạn sẽ muốn sử dụng thẻ tiêu đề (h1, h2, v.v.) cho tiêu đề và thẻ đoạn (p) cho nội dung. Cả hai yếu tố này đều là các phần tử cấp khối, cho phép những thứ như margin và line-height hoạt động.

Thẻ span là một phần tử nội tuyến (cho tất cả các ý định và mục đích) có nghĩa là nó được đặt ở giữa phần tử cấp khối mà không làm hỏng phần còn lại của thẻ.

Nếu bạn thực sự muốn ở lại với một khoảng thời gian, sau đó bạn có thể buộc khoảng thời gian hoạt động như một phần tử cấp khối bằng cách cấp cho nó thuộc tính CSS display: block. Tuy nhiên, tôi khuyên bạn nên sử dụng các phần tử cấp khối thực tế như các thẻ h1 hoặc p.

Answer 6

Tôi đã có một problen tương tự khi giao dịch với WordPress. Wordpress khét tiếng để tự động xóa các ký tự định dạng từ văn bản của người dùng cho một bài viết trên blog. Thách thức của tôi là căn giữa văn bản bài viết và chia dòng thành hai.

Đây là những gì tôi đã làm:

< trung tâm > Đây là một dòng tiêu đề rất dài tôi muốn hiển thị trong < div tôi > WordPress Điều Tiêu đề Dòng </div > </center >

Hành động trung tâm < > khá dễ hiểu. Vì <div> là phần tử cấp khối, nó phát hành một dòng mới.

Hy vọng điều này sẽ hữu ích.

Answer 7

Bạn có thể mô phỏng thẻ BR chiều rộng CSS như thế này:

span:after { 
    content: ' '; 
    display: block; 
} 

Sử dụng selector ": trước khi" nếu bạn cần "br" được mô phỏng trước khi nội dung khoảng

jsfiddle

Answer 8

<style> 
p.break{ 
    display:block; 
    clear: both; 
} 
</style>