当前位置： 文江博客话题详情

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

发布于 2024-10-17 10:32:37 字数 2720 浏览 6 评论 0原文

初学者页面构建问题：

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

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

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

PS 这是该页面的完整 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>

这是完整的 CSS：

body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: black;
  font-family: Arial,Helvetica,sans-serif;
  color: #cccccc;
  font-size: 16pt;
}
.wrapper {
  margin: auto;
  min-width: 900pt;
  font-family: Arial,Helvetica,sans-serif;
  width: 900pt;
  color: #cccccc;
}
.column_top {
  border-width: 0 0 5pt;
  border-bottom: 5pt solid black;
  min-width: 150pt;
  color: #333333;
  width: 150pt;
  max-width: 150pt;
  background-color: #f4f4f4;
  float: left;
  min-height: 45pt;
  max-height: 45pt;
  height: 45pt;
  padding-top: 105pt;
  font-size: 40pt;
  text-align: right;
  font-weight: bold;
}
.content_top {
  border-width: 0 0 5pt;
  border-bottom: 5pt solid #f4f4f4;
  height: 45pt;
  min-height: 45pt;
  max-height: 45pt;
  padding-top: 105pt;
  text-align: left;
  font-size: 40pt;
  font-weight: bold;
}
.column_bottom {
  border-width: 5pt 0 0;
  border-top: 5pt solid black;
  color: #333333;
  background-color: #f4f4f4;
  width: 145pt;
  min-width: 145pt;
  max-width: 145pt;
  text-align: right;
  padding-top: 50pt;
  padding-right: 5pt;
  float: left;
}
.content_bottom {
  border-top: 5pt solid #f4f4f4;
  padding: 10pt;
  border-collapse: separate;
  text-align: left;
}
.column_bottom ul {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  color: #333333;
  list-style-type: none;
  text-decoration: none;
}
.column_bottom a:hover {
  background-color: #999999;
}
.column_bottom a {
  text-decoration: none;
  font-weight: inherit;
  color: #333333;
}
原文

Beginner page building question:

I've got a simple /div container defined via a CSS style called "content_bottom" like such:

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

When I start typing text in it I noticed that the text starts touching the very left edge of the box. I tried to add padding and even borders (via the CSS style) to the container, but there was no effect. However, adding top/bottom borders DID have an effect. Why is this? What should I do so that the text would not start touching the very left (and top) of the box? Thanks.

P.S. This is the full HTML for the page:

<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>

Here is the full CSS:

body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: black;
  font-family: Arial,Helvetica,sans-serif;
  color: #cccccc;
  font-size: 16pt;
}
.wrapper {
  margin: auto;
  min-width: 900pt;
  font-family: Arial,Helvetica,sans-serif;
  width: 900pt;
  color: #cccccc;
}
.column_top {
  border-width: 0 0 5pt;
  border-bottom: 5pt solid black;
  min-width: 150pt;
  color: #333333;
  width: 150pt;
  max-width: 150pt;
  background-color: #f4f4f4;
  float: left;
  min-height: 45pt;
  max-height: 45pt;
  height: 45pt;
  padding-top: 105pt;
  font-size: 40pt;
  text-align: right;
  font-weight: bold;
}
.content_top {
  border-width: 0 0 5pt;
  border-bottom: 5pt solid #f4f4f4;
  height: 45pt;
  min-height: 45pt;
  max-height: 45pt;
  padding-top: 105pt;
  text-align: left;
  font-size: 40pt;
  font-weight: bold;
}
.column_bottom {
  border-width: 5pt 0 0;
  border-top: 5pt solid black;
  color: #333333;
  background-color: #f4f4f4;
  width: 145pt;
  min-width: 145pt;
  max-width: 145pt;
  text-align: right;
  padding-top: 50pt;
  padding-right: 5pt;
  float: left;
}
.content_bottom {
  border-top: 5pt solid #f4f4f4;
  padding: 10pt;
  border-collapse: separate;
  text-align: left;
}
.column_bottom ul {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  color: #333333;
  list-style-type: none;
  text-decoration: none;
}
.column_bottom a:hover {
  background-color: #999999;
}
.column_bottom a {
  text-decoration: none;
  font-weight: inherit;
  color: #333333;
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

吃素的狼 2024-10-24 10:32:37

您的 html 和 css 可以正常工作，因此您的 css 文件中一定存在拼写错误，导致其无法使用。

一切都按其应有的方式进行。你的问题是盒子的填充位于左浮动导航栏后面，你的盒子实际上是 100% 宽，尽管部分隐藏在底部导航栏后面。

您也可以通过将 .content_bottom 容器向左浮动来解决问题。

您需要对边框进行一些额外的更改，但您可以在顶部进行此操作，这样您就只有一个水平边框，而不是 2 个具有相同颜色的接触边框。

请参阅此处的工作示例。

Your html and css work so there must be a typo somewhere in your css file that causes it to be not used.

Everything is working as it should. Your problem is that the padding of the box is behind the left-floated nav-bar, your box is really 100% wide although part is hidden behind the bottom nav.

You can solve your problem by floating the .content_bottom container left as well.

You will need to make some additional changes for the borders, but you can do that in the top section so that you only have one horizontal border instead of 2 touching borders with the same colour.

See here for a working example.

回复 原文
最初的梦 2024-10-24 10:32:37

内边距：5px；

或顶部填充：5px；仅用于顶部

padding: 5px;

or padding-top:5px; for just the top

回复 原文
得不到的就毁灭 2024-10-24 10:32:37

所有边上的 10px 内边距

padding:10px;

顶部/底部上的 0px 内边距和右/左上的 10px 内边距

padding:0px 10px;

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

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

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

padding: 20px 10px 30px;

现在您已经了解了有关填充的所有信息。

10px Padding on all sides

padding:10px;

0px padding on top/bottom and 10px padding on right/left

padding:0px 10px;

for a combination of sides, you can do this

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

You can also use the below shortcut to make top/bottom have different values while keeping right/left the same

padding: 20px 10px 30px;

Now you know everything their is to know about padding.

回复 原文
万人眼中万个我 2024-10-24 10:32:37

听起来你正在经历边界崩溃。尝试 border-collapse:separate 。

It sounds like you're experiencing collapsing borders. Try border-collapse:separate.

回复 原文
沩ん囻菔务 2024-10-24 10:32:37

border-collapse:separate 和 padding: 10px 的混合；应该可以帮到你。发布一些代码以获得更详细的解释。

a mixture of border-collapse:separate and padding: 10px; should do the trick for ya. Post some code for a more detailed explanation.

回复 原文
~没有更多了~

关于作者

只等公子

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

我一直都在从未离去

文章 0 评论 0

fangs

文章 0 评论 0

朱染

文章 0 评论 0

zhangcx

文章 0 评论 0

Willy

文章 0 评论 0

taohaoge

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文