在文本周围添加填充答案

【问题标题】：Adding padding around text在文本周围添加填充
【发布时间】：2018-05-28 22:11:35
【问题描述】：

为什么这不起作用或在我的文本周围应用间距？

<style>
.headertext
div {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 20px;
  
}
</style>

<div class= "headertext"><font size="2" color= "#ffffff"><p class="Roboto">PAGE TITLE</p></font></div>

请帮忙:)

【问题讨论】：

您应该删除字体标签并告诉我们您想要填充的位置。
请说明您是在寻找填充还是边距。您当前的 CSS 应该在所有 div 的左侧添加 20 个边距。如果您想专门在文本周围进行填充，您可以为 .Roboto 类添加 CSS 规则，例如“padding: 20px”。

标签： html css padding

【解决方案1】：

删除font标签

.headertext {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 20px;
}

<div class="headertext">
  <p class="Roboto">PAGE TITLE</p>
</div>

【讨论】：

【解决方案2】：

.headertext{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 20px;
}

.headertext > p{
   font-size:14px;
   color:#000;
}

<div class="headertext">
    <p>PAGE TITLE</p>
</div>

【讨论】：

【解决方案3】：

使用您的 html 来回答。单击“运行代码 sn-p”按钮以查看输出。我添加了背景以显示文本周围的填充。您可以删除新添加的颜色。

 body{background-color:green;}
.headertext {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 20px; 
}
p{
   padding:15px;
   background-color:
   blue !important;
}

&lt;div class= "headertext"&gt;&lt;font size="2" color= "#ffffff"&gt;&lt;p class="Roboto"&gt;PAGE TITLE&lt;/p&gt;&lt;/font&gt;&lt;/div&gt;

【讨论】：