css - 使用 bootstrap 和 angular 时产生空白、空 标签

Question

在我正在构建的特定 Web 应用程序中，我刚刚注意到我所有的 <br />标签产生的结果基本上……什么都没有。

我已经非常努力地寻找原因，但无法弄清楚。我正在使用 bootstrap , angular , 和 font-awesome - 但这是 CSS 矩阵显示的 <br /> .

据我所知，我不知道这里有什么可能会压扁它。

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', serif;
    font-weight: 300;
    padding-bottom: 80px;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}
::-webkit-scrollbar-thumb {
    background: slategray;
}
::-webkit-scrollbar-track {
    background: #b8c0c8;
}
body ::selection {
    background-color: #0B6392;
    text-shadow: none;
    color: #fff;
}

根据Google Chrome，这是它的计算属性列表

align-content:  normal
align-items:  stretch
align-self:  stretch
alignment-baseline:  auto
animation-delay:  0s
animation-direction:  normal
animation-duration:  0s
animation-fill-mode:  none
animation-iteration-count:  1
animation-name:  none
animation-play-state:  running
animation-timing-function:  ease
backface-visibility:  visible
background-attachment:  scroll
background-blend-mode:  normal
background-clip:  border-box
background-color:  rgba(0, 0, 0, 0)
background-image:  none
background-origin:  padding-box
background-position:  0% 0%
background-repeat:  repeat
background-size:  auto
baseline-shift:  0px
border-bottom-color:  rgb(51, 51, 51)
border-bottom-left-radius:  0px
border-bottom-right-radius:  0px
border-bottom-style:  none
border-bottom-width:  0px
border-collapse:  separate
border-image-outset:  0px
border-image-repeat:  stretch
border-image-slice:  100%
border-image-source:  none
border-image-width:  1
border-left-color:  rgb(51, 51, 51)
border-left-style:  none
border-left-width:  0px
border-right-color:  rgb(51, 51, 51)
border-right-style:  none
border-right-width:  0px
border-top-color:  rgb(51, 51, 51)
border-top-left-radius:  0px
border-top-right-radius:  0px
border-top-style:  none
border-top-width:  0px
bottom:  auto
box-shadow:  none
box-sizing:  border-box
break-after:  auto
break-before:  auto
break-inside:  auto
buffered-rendering:  auto
caption-side:  top
clear:  none
clip:  auto
clip-path:  none
clip-rule:  nonzero
color:  rgb(51, 51, 51)
color-interpolation:  sRGB
color-interpolation-filters:  linearRGB
color-rendering:  auto
column-count:  auto
column-gap:  normal
column-rule-color:  rgb(51, 51, 51)
column-rule-style:  none
column-rule-width:  0px
column-span:  none
column-width:  auto
cursor:  auto
cx:  0px
cy:  0px
direction:  ltr
display:  inline
dominant-baseline:  auto
empty-cells:  show
fill:  rgb(0, 0, 0)
fill-opacity:  1
fill-rule:  nonzero
filter:  none
flex-basis:  auto
flex-direction:  row
flex-grow:  0
flex-shrink:  1
flex-wrap:  nowrap
float:  none
flood-color:  rgb(0, 0, 0)
flood-opacity:  1
font-family:  'Open Sans', serif
font-kerning:  auto
font-size:  14px
font-stretch:  normal
font-style:  normal
font-variant:  normal
font-variant-ligatures:  normal
font-weight:  300
height:  auto
image-rendering:  auto
isolation:  auto
justify-content:  normal
left:  auto
letter-spacing:  normal
lighting-color:  rgb(255, 255, 255)
line-height:  20px
list-style-image:  none
list-style-position:  outside
list-style-type:  disc
margin-bottom:  0px
margin-left:  0px
margin-right:  0px
margin-top:  0px
marker-end:  none
marker-mid:  none
marker-start:  none
mask:  none
mask-type:  luminance
max-height:  none
max-width:  none
min-height:  0px
min-width:  0px
mix-blend-mode:  normal
motion-offset:  0px
motion-path:  none
motion-rotation:  auto 0deg
object-fit:  fill
object-position:  50% 50%
opacity:  1
order:  0
orphans:  auto
outline-color:  rgb(51, 51, 51)
outline-offset:  0px
outline-style:  none
outline-width:  0px
overflow-wrap:  normal
overflow-x:  visible
overflow-y:  visible
padding-bottom:  0px
padding-left:  0px
padding-right:  0px
padding-top:  0px
paint-order:  fill stroke markers
perspective:  none
perspective-origin:  0px 0px
pointer-events:  auto
position:  static
r:  0px
resize:  none
right:  auto
rx:  0px
ry:  0px
shape-image-threshold:  0
shape-margin:  0px
shape-outside:  none
shape-rendering:  auto
speak:  normal
stop-color:  rgb(0, 0, 0)
stop-opacity:  1
stroke:  none
stroke-dasharray:  none
stroke-dashoffset:  0px
stroke-linecap:  butt
stroke-linejoin:  miter
stroke-miterlimit:  4
stroke-opacity:  1
stroke-width:  1px
tab-size:  8
table-layout:  auto
text-align:  start
text-align-last:  auto
text-anchor:  start
text-decoration:  none
text-indent:  0px
text-overflow:  clip
text-rendering:  auto
text-shadow:  none
text-transform:  none
top:  auto
touch-action:  auto
transform:  none
transform-origin:  0px 0px
transform-style:  flat
transition-delay:  0s
transition-duration:  0s
transition-property:  all
transition-timing-function:  ease
unicode-bidi:  normal
vector-effect:  none
vertical-align:  baseline
visibility:  visible
white-space:  normal
widows:  1
width:  auto
will-change:  auto
word-break:  normal
word-spacing:  0px
word-wrap:  normal
writing-mode:  horizontal-tb
x:  0px
y:  0px
z-index:  auto
zoom:  1
-webkit-app-region:  no-drag
-webkit-appearance:  none
-webkit-background-composite:  source-over
-webkit-border-horizontal-spacing:  0px
-webkit-border-vertical-spacing:  0px
-webkit-box-align:  stretch
-webkit-box-decoration-break:  slice
-webkit-box-direction:  normal
-webkit-box-flex:  0
-webkit-box-flex-group:  1
-webkit-box-lines:  single
-webkit-box-ordinal-group:  1
-webkit-box-orient:  horizontal
-webkit-box-pack:  start
-webkit-box-reflect:  none
-webkit-font-smoothing:  auto
-webkit-highlight:  none
-webkit-hyphenate-character:  auto
-webkit-line-break:  auto
-webkit-line-clamp:  none
-webkit-locale:  "en"
-webkit-margin-after-collapse:  collapse
-webkit-margin-before-collapse:  collapse
-webkit-mask-box-image:  none
-webkit-mask-box-image-outset:  0px
-webkit-mask-box-image-repeat:  stretch
-webkit-mask-box-image-slice:  0 fill
-webkit-mask-box-image-source:  none
-webkit-mask-box-image-width:  auto
-webkit-mask-clip:  border-box
-webkit-mask-composite:  source-over
-webkit-mask-image:  none
-webkit-mask-origin:  border-box
-webkit-mask-position:  0% 0%
-webkit-mask-repeat:  repeat
-webkit-mask-size:  auto
-webkit-print-color-adjust:  economy
-webkit-rtl-ordering:  logical
-webkit-tap-highlight-color:  rgba(0, 0, 0, 0)
-webkit-text-combine:  none
-webkit-text-decorations-in-effect:  none
-webkit-text-emphasis-color:  rgb(51, 51, 51)
-webkit-text-emphasis-position:  over
-webkit-text-emphasis-style:  none
-webkit-text-fill-color:  rgb(51, 51, 51)
-webkit-text-security:  none
-webkit-text-stroke-color:  rgb(51, 51, 51)
-webkit-text-stroke-width:  0px
-webkit-user-drag:  auto
-webkit-user-modify:  read-only
-webkit-user-select:  text
-webkit-border-image:  none
-webkit-text-orientation:  vertical-right

Answer 1

在网络浏览器的元素检查器中检查 break 标签。如果这不起作用，请尝试使用 <br style='height: 30px;' />只是为了看看是否有什么东西压倒了它。如果这不起作用，只需在您的 CSS 中使用以下代码

br {
  padding-top: 10px !Important;
}