我想将div .container下移.我试着使用(页边距-顶部:30px)是有效的,但它沿着(.tainer)的边界向下移动,与.alloutline一起向下移动.我希望.container的边框是唯一下移的边框:

.all {
  outline: 3px solid blue;
  height: 100vh;
  outline-offset: 5px;
  position: relative;
}

.container {
  border: 2px solid red;
  height: 600px;
  width: 335px;
  margin-top: 30px;
}
<div class="all">
  <div class="container">
  </div>
</div>

推荐答案

要仅将.container元素的边框向下移动而不影响.all的轮廓,可以将padding-top应用到.all.

.all {
  outline: 3px solid blue;
  height: 100vh;
  outline-offset: 5px;
  position: relative;
  padding-top:30px;
}

.container {
  border: 2px solid red;
  height: 600px;
  width: 335px;
}
<div class="all">
  <div class="container">
  </div>
</div>

Html相关问答推荐

NG8004:找不到名为""的管道.'' [插件Angular 编译器]

窗口对象中是否有对<;html&>根元素的引用?

创建一个带有div和径向渐变的全宽半圆

如何在html和css中创建动态调整大小的表元素

我怎样才能有一个div,在其中放置一个消息,打破和不go 的div?

如何在页面太短时使<;img&>缩小而不发生y溢出

渐变进度条位置

为什么字体大小而不是 colored颜色 属性适用于元素?

HTML 邮箱在 Gmail 中无法正确显示

下划线在 Bootstrap 5 导航链接下无法正常工作

如何使用javascript在jsx中重复插入特殊字符?

我如何使用 html 在表格的单元格内实现下面显示的背景 colored颜色 加载器(请判断设计参考的图像链接)

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

当我将有序列表居中时,数字会跑到列表的另一行

CSS flex:0 0 auto创建了1像素的间隙

无法使用 flexbox 裁剪图像

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

无法从社交栏中 Select 选项

水平滚动框不显示所有元素