溢出:自动 - 没有右侧填充和填充边距、镀铬

发布于 2024-12-04 19:19:30 字数 717 浏览 2 评论 0原文

问题是父div中没有​​右内边距,子div中没有​​右外边距。我正在使用铬。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Template</title>
</head>
<body>
    <div style = "padding: 50px; overflow: auto; width: 300px; height: 300px; background-color: red;">
        <div style = "width: 500px; height: 500px; background-color: green;"></div>
    </div>
    <hr />
    <div style = "overflow: auto; width: 300px; height: 300px; background-color: red;">
        <div style = "margin: 50px; width: 500px; height: 500px; background-color: green;"></div>
    </div>
</body>
</html>

The problem is that there is no right padding in the parent div and no right margin in the child div. I am using chrome.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Template</title>
</head>
<body>
    <div style = "padding: 50px; overflow: auto; width: 300px; height: 300px; background-color: red;">
        <div style = "width: 500px; height: 500px; background-color: green;"></div>
    </div>
    <hr />
    <div style = "overflow: auto; width: 300px; height: 300px; background-color: red;">
        <div style = "margin: 50px; width: 500px; height: 500px; background-color: green;"></div>
    </div>
</body>
</html>

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

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

发布评论

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

评论(1

笑着哭最痛 2024-12-11 19:19:30

我找到了填充的解决方案,不幸的是它不适用于边距:

.container {
  overflow: auto;
  width: 300px;
  height: 150px;
  background-color: red;
}
.padding {
  float: left;
  padding: 50px;
}
.content {
  width: 500px;
  height: 500px;
  background-color: green;
}
<div class="container">
  <div class="padding">
    <div class="content"></div>
  </div>
</div>

I found the solution for padding, unfortunately it does not work with margin:

.container {
  overflow: auto;
  width: 300px;
  height: 150px;
  background-color: red;
}
.padding {
  float: left;
  padding: 50px;
}
.content {
  width: 500px;
  height: 500px;
  background-color: green;
}
<div class="container">
  <div class="padding">
    <div class="content"></div>
  </div>
</div>

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