如何通过CSS在/div容器中添加填充空间？_Css_Text_Containers_Html

如何通过CSS在/div容器中添加填充空间？

css text html

如何通过CSS在/div容器中添加填充空间？,css,text,containers,html,Css,Text,Containers,Html,初学者页面构建问题：我有一个简单的/div容器，它是通过一个名为“content\u bottom”的CSS样式定义的，如下所示： border-top: 5pt solid #f4f4f4; padding: 10pt; border-collapse: separate; text-align: left; 当我开始在其中输入文本时，我注意到文本开始接触框的最左边缘。我尝试向容器添加填充甚至边框（通过CSS样式），但没有效果。但是，添加上/下边框确实有效果。为什么会这样？我应该怎么做才能

初学者页面构建问题：

我有一个简单的/div容器，它是通过一个名为“content\u bottom”的CSS样式定义的，如下所示：

border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;

当我开始在其中输入文本时，我注意到文本开始接触框的最左边缘。我尝试向容器添加填充甚至边框（通过CSS样式），但没有效果。但是，添加上/下边框确实有效果。为什么会这样？我应该怎么做才能使文本不会开始接触框的最左侧（和顶部）？谢谢

另外，这是该页面的完整HTML：

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>site title goes here</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">this <br>
</div>
<div class="content_top">is site title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">this is the container's content<br>
</div>
</div>
</body>
</html>

填充物：5px

或衬垫顶部：5px；就顶部而言

听起来您正在经历边界崩溃。尝试边框折叠：分离。

边框折叠：分离和填充的混合：10px；我应该为你做这件事。发布一些代码以获得更详细的解释。

10px填充在所有侧面

padding:10px;

顶部/底部为0px填充，右侧/左侧为10px填充

padding:0px 10px;

对于边的组合，您可以这样做

padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px

您还可以使用下面的快捷方式使“上/下”具有不同的值，同时保持“右/左”相同

padding: 20px 10px 30px;

现在你知道了他们要知道的一切

您的html和css工作正常，因此您的css文件中一定有打字错误，导致它无法使用

一切都正常运转。你的问题是盒子的填充物在左侧浮动导航条的后面，你的盒子实际上是100%宽的，尽管部分隐藏在底部导航条的后面

您也可以通过将

.content\u底部的容器浮动到左侧来解决问题
您将需要对边框进行一些额外的更改，但您可以在顶部部分进行更改，以便只有一个水平边框，而不是两个相同颜色的触摸边框
.填充肯定会影响您的文本。你可以发布你的实际HTML以及任何应用于DIV的CSS吗？好的，编辑问题以包含完整的HTML（简短）；只影响顶部和底部，仍然无法得到左侧或右侧填充…尝试了所有这些，顶部和底部工作，但侧面仍然没有填充…您询问了填充，我为您提供了填充的所有可能性。如果填充不是您想要的，您可以尝试边距。只需用边距替换填充。这将从外部设置空间。太好了，填充现在可以工作了！我还将对边界进行调整。非常感谢你！
padding: 20px 10px 30px;