CSSを使用して<br/>（brタグ）をシミュレートするにはどうすればよいですか？

Question

は、私がここにCSSとHTMLの次の行を持っている：

CSS：

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

HTML：

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

私は、CSSで同等で<br/>タグを交換したいと思いますが、私はそれに苦しんでいます。助けていただければ幸いです。

私はマージンボトム、マージントップ、ラインハイトを試しましたが、いずれも機能しませんでした。 span上

Answer 1

<span>はインライン要素なので、marginが適用されていないことができますが、それは、paddingを取ることができます - それを.title { padding: 10px 0; }のようなものを与え、それが段落をシミュレートします、または単に.title { display: block; }その下に行くために次のことを強制します。

Answer 2

使用display:block;、などの

：

.title, .Content { display:block; } 

Answer 3

さて、問題は、インラインタグである "スパン" を使用していることです。 たとえば、margin-bottomを使用できるようにブロック要素を使用する必要があります。

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

またはあなたは、ディスプレイを使用することができます：

あなたはこれを試みることができるインラインブロックを。

Answer 4

display: block;しかし、<span>は意味的には間違ったタグ（ブロックタグではなくインラインタグ）です。 <div>はおそらくより良いマッチで、既にブロックとして表示されているボーナスが付属しています。他のタグがまだまだ適切かもしれません。

Answer 5

意味的には、タイトルには見出しタグ（h1、h2など）を、コンテンツには段落タグ（p）を使用します。どちらもブロックレベルの要素で、marginやline-heightのようなものがあります。

spanタグはインライン要素であり、（すべての目的と目的のために）それはブロックレベルの要素の真ん中に残り、タグの残りの部分を混乱させないことを意味します。

実際にスパンに滞在したい場合は、CSSプロパティdisplay: blockを与えることでスパンをブロックレベルの要素のように動作させることができます。しかし、h1やpタグなど、実際のブロックレベルの要素を使用することをお勧めします。

Answer 6

私はWordPressを扱うときに同様のプロブレンを持っていました。 Wordpressは、ブログ記事のユーザーのテキストから書式設定文字を自動的に削除することで有名です。私の挑戦は、記事のテキストを中心にして線を2つに分割することでした。

私がやったこの：

<センター>これは私が私の<のdiv > WordPressの記事タイトルライン</divの> < /中央に>

を表示するアクションたい非常に長いタイトル行であります< >はかなりわかりやすいです。 <div>はブロックレベルの要素なので、新しい行が発行されます。

これが役に立ちます。

Answer 7

あなたは、このようなBRタグ幅CSSシミュレートすることができます：セレクタを使用し

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

を "：前に" あなたは "BR" を必要とする場合は、スパンコンテンツ

jsfiddle

Answer 8

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

前にシミュレートされて