Question

我正在创建一个非常简单的网页。它有一个div标签，其中包含一个包含一些文本的段落。

<HTML>
 <Head>....</Head>
 <Body> 
 <div id="titlebox">
 <p>First Heading</p>
 </div>
 </Body>

这是div的CSS样式：

div#titlebox {background-color:#f2f2f2; 
              padding-top:2px;
              padding-bottom:2px;
              padding-left:2px;  }

摘录：

div#titlebox {
  background-color: #f2f2f2;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
}

<HTML>

<Head>....</Head>

<Body>
  <div id="titlebox">
    <p>First Heading</p>
  </div>
</Body>

</HTML>

文本正确显示，背景颜色也很好，但是对于填充，仅应用填充顶部而忽略底部和左侧填充。有关此代码有什么问题的任何建议吗？顺便说一下，我是HTML的新手。我搜索了这个问题，有关浮动的问题，但这并不能解决我的问题。

Answer 1

这是无需使用CSS即可尝试的解决方案

<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
 <p>First Heading</p>
</div>
</body>

你好，我不会批评你，我看到你是一个初学者，这只会鼓励你，但是普通的语法，html，head，用简单的字母写成的主体，以避免以后再阅读自己的代码时感到困惑

跟随该网址：

Is it bad to use uppercase letters for html tags?

Answer 2

你的左边和底部填充是有效的，但你可能无法看到它，因为2px非常小。将它改为20px或其他什么，你应该看到填充。

便捷工具 - 如果您使用的是Chrome，则可以右键单击要检查的元素，然后选择“检查”工具以查看图表上的所有填充和边距。

- 注意 - 根据您使用的浏览器，将会有一些默认样式/填充/边距已应用于某些元素，在这种情况下，您的段落标记已经有一些顶部和底部填充

HTML填充 - 左边没有为div工作

2 个答案: