HTML 左填充不适用于 div

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>

文本显示正确，背景颜色也很好，但是关于padding，只应用了padding-top，忽略了padding bottom和left。关于此代码有什么问题的任何建议？顺便说一句，我是 HTML 的新手。我用谷歌搜索了这个问题，其中有关于浮动的点，但这并没有解决我的问题。

Answer 1

您的代码工作正常:)) 我只是将填充变大以使其更明显

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

<HTML>


<Head>....</Head>

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

</HTML>

Answer 2

您的左内边距和底部内边距有效，但您可能看不到它，因为 2px 实在太小了。将其更改为 20px 或其他内容，您应该会看到填充。

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

--注意-- 根据您使用的浏览器，某些元素已经应用了一些默认 styles/padding/margin，在这种情况下，您的段落标记已经有一些顶部和底部填充

Answer 3

这是您可以在不使用 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，body 用简单的字母写，以避免阅读你自己的代码时混淆后来

关注这个url：

Is it bad to use uppercase letters for html tags?

HTML 左填充不适用于 div

HTML padding-left not working for div

html

css

android-webview