CSS是否已替换& lt; br/& gt ;? [英] Has CSS replaced <br/>?
问题描述
如今,我看到许多网站上的< br/>
标签很少或没有.CSS是否已经消除了对< br/>
的需求,还是< br/>
仍然有用?
我问这个问题是为了让我知道将来是否使用< br/>
.
以 D.A.说,有时 < br>
是合适的,有时甚至不合适-这取决于您使用它的目的.在不适合使用
的情况下,以下是使用哪种CSS 而不是
< br>
的一些示例./p>
垂直边距或填充
如果您使用< br>
来添加垂直空间仅仅是因为它看起来更好(不是因为换行符是内容的一部分),则应使用垂直边距或填充.代替这个:
< div class ="foo">某些内容</div>< br>< br>< div class ="bar">更多内容</div>
您可能想要这个:
< div class ="foo">某些内容</div>< div class ="bar">更多内容</div>
.foo {margin-bottom:2em;}
根据情况,您可能需要更改距离 2em
,或使用 padding
代替 margin
,或将空格 .bar
的顶部,而不是 .foo
的底部.
显示:阻止
如果您仅使用一个< br>
出于视觉效果就将一行分成两行,则最好使用 display:block
.如果您使用以下格式的HTML:
< label for ="first-name">名字:</label>< br><输入type ="text" id =名字" name =名字"/>
然后您应该执行以下操作:
< label for ="first-name">名字:</label><输入type ="text" id =名字" name =名字"/>
表单标签{display:block;}
默认情况下,
< label>
是 display:inline
,这意味着它们可以与其他文本排成一行.当您使元素 display:block
且未将其 width
设置为诸如 100px
之类的固定值时,元素将展开以填充整个行,将其后的元素强制到下一行.
Nowadays I see many websites having few or no <br/>
tags. Has CSS obviated the need for <br/>
, or is <br/>
still useful?
I am asking this so that I know whether or not to use <br/>
in the future.
As D.A. said, sometimes <br>
is appropriate and sometimes it isn’t – it depends on what you’re using it for. Here are some examples of what CSS to use instead of <br>
, in the cases where <br>
is not appropriate.
Vertical margin or padding
If you’re using <br>
to add vertical space just because it looks nicer (not because the line breaks are part of the content), you should use vertical margin or padding. Instead of this:
<div class="foo">some content</div>
<br><br>
<div class="bar">more content</div>
You might want this:
<div class="foo">some content</div>
<div class="bar">more content</div>
.foo { margin-bottom: 2em; }
Depending on the situation, you might want to change the distance 2em
, or using padding
instead of margin
, or put the space at the top of .bar
instead of the bottom of .foo
.
display: block
If you’re using a single <br>
to break a line into two solely for visual effect, it might be better to use display: block
. If you have this HTML in a form:
<label for="first-name">First name:</label>
<br>
<input type="text" id="first-name" name="first-name" />
then you should do something like this instead:
<label for="first-name">First name:</label>
<input type="text" id="first-name" name="first-name" />
form label { display: block; }
<label>
s are display: inline
by default, meaning they can sit on a line with other text. When you make an element display: block
and don’t set its width
to a fixed value like 100px
, the element expands to fill the whole line, forcing the element after it to the next line.
这篇关于CSS是否已替换& lt; br/& gt ;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!