HTML/CSS:使用<br>标签或重复样式

Question

当你必须为多个标题指定相同的.css类时,<h3>使用<br>标记是否更好？或者在一遍又一遍地指定相同的样式类时重复标题是否更好？在这个特定的场景中,我不能把造型放在周围<div>

哪一个是最佳实践,为什么？

使用<br>标签时的代码示例:

    <div class="more_room_left | more_room_top">
        <h5 class="no_margin_top_bottom">
            *location?.streeth* *location?.number*
            <br> *location?.postcode* *location?.city*
            <br> *location?.country*
            <br>
        </h5>
    </div>

使用不同标头的代码示例:

    <div class="more_room_left | more_room_top">
        <h5 class="no_margin_top_bottom">*location?.streeth* *location?.number*</h5>
        <h5 class="no_margin_top_bottom">*location?.postcode* *location?.city*</h5>
        <h5 class="no_margin_top_bottom">*location?.country*</h5>
    </div>

视觉示例:

编辑:

在阅读了有关何时使用<br>标签的更多信息之后,我得出结论,在我的情况下,<br>标签没有价值,被认为是黑客.我重新设计了标题的样式<h3>,现在是段落<p>,以适应我需要的样式而不使用<br>标记.这个解决方案是通过已经删除的答案交给我的,所以我不能给予信任.

HTML

    <div class="address_container | more_room_left | more_room_top">
        <p>*location?.streeth* *location?.number*</p>
        <p>*location?.postcode* *location?.city*</p>
        <p>*location?.country*</p>
    </div>

CSS

.address_container > p {
    margin-top: 0;
    margin-bottom: 0;
}

Answer 1

有各种因素可以定义应该使用哪一个.

例如,如果您希望检索此标题文本,您希望如何获得值.您需要整个文本或单个值.如果需要单个值,我建议使用多个标头.

相反,如果要一起接收整个值,请使用带有brs的单个标头.但使用<br/>不被视为良好做法,你应该参考:使用<BR />有时是不好的吗？

另一个这样的情况是自适应设计.在较小的屏幕上,它们应如何包裹？如果你*location?.streeth* *location?.在一行和number*下一行都没问题,你可以使用单一标题.但是如果你想*location?.number在下一行中换行,那么使用多个元素会更合适.

如果不会检索值并且仅用于查看,那么任何一个都可以.但在这种情况下,我会去<p>(按照apokryfos的建议)并为视图添加自定义样式.

值得注意的是,HTML 5通过添加许多视觉上相同但名称和目的不同的标签,在制作网页语义方面投入了大量精力.因此,您应该使用标题标记(例如`)来包含5级标题,例如,当您需要为文档指定5级子节时.这意味着您不应该对所讨论的元素使用标题,因为标题的唯一目的是用于样式而不是提供语义重要性.