英文:
How to make border to move upwards
问题
要求.container边框向上移动一点，而不带着其他(body)边框。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
outline: 3px solid blue;
height: 100vh;
outline-offset: 5px;
}
.container {
border: 2px solid red;
height: 610px;
width: 350px;
transform: translateY(30px);
}
<!-- language: lang-html -->
<body>
<div class="container"></div>
</body>
<!-- end snippet -->
I want .container border to move upwards abit without carrying the other (body)border along
答案1
得分: 0
不太清楚...
我理解的是：
- 红色边框向上移动？
你需要删除 transform: translateY(30px);
如果你仍然想在顶部留一些空间供文本使用，可以添加 padding-top
body {
outline: 3px solid blue;
height: 100vh;
outline-offset: 5px;
}
.container {
border: 2px solid red;
height: 610px;
width: 350px;
padding-top: 30px;
}
<div class="container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aspernatur assumenda consequatur cupiditate debitis eveniet expedita, facilis ipsa magnam maiores minima nam, necessitatibus nemo officia officiis quasi sapiente temporibus voluptas?</div>
<div>A ab aliquam at dolore dolorum eaque earum eum impedit incidunt iure iusto laborum magni modi nesciunt nobis, placeat provident quaerat saepe veniam voluptate! Animi at consequuntur obcaecati recusandae sunt?</div>
</div>
英文:
Not very clear...
What I'm understanding is:
- border red move upward?
you need to delete the transform: translateY(30px);
if you still want some space on top for the text, you add padding-top
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
outline: 3px solid blue;
height: 100vh;
outline-offset: 5px;
}
.container {
border: 2px solid red;
height: 610px;
width: 350px;
padding-top: 30px;
}
<!-- language: lang-html -->
<div class="container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aspernatur assumenda consequatur cupiditate debitis eveniet expedita, facilis ipsa magnam maiores minima nam, necessitatibus nemo officia officiis quasi sapiente temporibus voluptas?</div>
<div>A ab aliquam at dolore dolorum eaque earum eum impedit incidunt iure iusto laborum magni modi nesciunt nobis, placeat provident quaerat saepe veniam voluptate! Animi at consequuntur obcaecati recusandae sunt?</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论