Question

如何摆脱我在pic中标记code pen的P元素中的白底填充？

我已经尝试在其中填充0并且所有内容都围绕它但是没有工作

由于

＆＃13;

body {
  margin: 60px 60px 60px 60px;
  font-size: 100%;
}
h1 {
  font-family: lobster, Monospace;
  text-align: center;
  font-size: 5em;
  /* 80px/16=5em */
  text-decoration: underline;
  margin-bottom: 60px;
  border-style: ;
}
blockquote {
  font-size: 20px;
  font-family: 'Puritan', cursive;
  color: black;
}
.img-r {
  /* other definitions */
  width: 100%;
}
.padding {
  padding-top: 0px;
  padding-bottom: 0px;
}
li {
  font-family: Monospace;
  text-align: center;
  font-size: 2em;
  /* 80px/16=5em */
  text-decoration: ;
  margin-bottom: 50px;
  border-style: ;
  word-wrap: break-word;
}
@media (max-width: 700px) {
  .jumbotron p {
    font-size: 5px;
  }
}
.pad {
  padding: 0px;
}

＆＃13;

<head>
  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>

<h1> 
        Dame Stephanie "Steve" Shirley
        </h1>

<div class="container-fluid">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-9 col-md-6">
            <h2 style="color: #645340; text-decoration: underline;" class="text-
            center">AboutDame Stephanie "Steve" Shirley </h2>
            <ul class="text-center pad">

              <li class="text-center"><em>Dame Stephanie "Steve" Shirley 
    was born as Vera Buchthal to a Jewish father, a judge in Dortmund who lost his post to the Nazi regime, and a non-Jewish Viennese mother.</em>
              </li>
              <li class="text-center"><em>In July 1939, at the age of five, Shirley arrived, together with her nine-year-old sister Renate, to Britain as a Kindertransport child refugee.She was placed in the care of foster parents living in the Midlands town of Sutton Coldfield.</em>
              </li>
              <li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
              </li>
              <li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
              </li>
              <li class="text-center"><em>In the 1950s, Stephanie worked at the Post Office Research Station at Dollis Hill, building computers from scratch and writing code in machine language. She took evening classes for six years to obtain an honours degree in mathematics. In 1959, she moved to CDL Ltd, designers of the ICT 1301 computer.</em>
              </li>
              <li class="text-center"><em>After marriage to a physicist, Derek Shirley, in 1962, Shirley founded, with a capital of £6, the software company Freelance Programmers</em>
              </li>
              <li class="text-center"><em> She wanted to create job opportunities for women with dependents, and predominantly employed women, with only 3 male programmers in the first 300 staff,[8] until the Sex Discrimination Act 1975 made that practice illegal.</em>
              </li>
              <li class="text-center"><em>She adopted the name, Steve, to help her in the male-dominated business world.[9] Her team's projects included programming Concorde's black box flight recorder.</em>
              </li>
              <li class="text-center"><em>Shirley retired in 1993 at the age of 60 and has since focused on her philanthropy.</em>
              </li>
              <li class="text-center"><em>Shirley was appointed Officer of the Order of the British Empire (OBE) in the 1980 Queen's Birthday Honours, for services to industry and promoted Dame Commander (DBE) in the New Year Honours, 2000 for services to Information Technology.</em>
              </li>
          </div>

          <div class="col-xs-3 col-md-6">
            <div class="thumbnail padding">
              <img class="img-responsive img-r center-block padding" src="https://ichef.bbci.co.uk/images/ic/480xn/p014nf75.jpg">
              <div>
                <p class="text-center">
                  Dame Stephanie "Steve" Shirley
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

＆＃13;

Answer 1

这是由于浏览器特定的规则。不确定其他人，但要在Chrome中摆脱它，请使用：

-webkit-margin-after: 0px;

我假设其余的都遵循相同的供应商前缀模式，但我还没有经过测试。

Answer 2

我将此添加到我的css并将该类应用于p元素。

如果p元素下面的间距，它会消失。但是当窗口变小时，p元素会显示出聚合，这是之前没有做过的。

我该如何解决？

.margin {
padding-top: 18px;
line-height: 0; 
}

谢谢，

[R

Answer 3

没有评论的声誉.. 如果您的意图只是让文本居于p，那么所有这些hacky规则都不需要。只需设置一个合适的行高和垫，无论你想要什么;

.jumbotron p {
    font-size: 21px;
    font-weight: 200;
    padding: 0px; /* adjust freely */
    margin: 0px;
    line-height: 1em;
}

你也可以只使用行高，它将保持垂直居中..

如何摆脱p元素中的填充

3 个答案: