Question 195859 in Html Question posted in
Some basic documentation can be found here.

Html – How can I move one border down

I want to move div .container down. I tried using (margin-top: 30px) is working but it moves down the border of (.container) down together with outline of .all. I want the border of .container to be the only one that is moved down:

.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>
Tags:

3

Answers


  1. 0

    either:

    .container {position: relative; top: 30px;}

    or:

    .all {padding-top: 30px;}
    Login or Signup to reply.
  2. 0

    To move only the border of the .container element down without affecting the outline of .all , you can apply padding-top to .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>
    Login or Signup to reply.
  3. 0

    Using transform instead. For absolute distance you want, translate is the good choice. For this situation tranform: translateY(*px) is the way.

    Btw we can combine position with top left bottom right too.

    use position: relative at parent node to mark the spot to using top/left.

    use position: absolute at the node you want to move and top: 30px to move it down 30px from parent node

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

.container {
  border: 2px solid red;
  height: 600px;
  width: 335px;
  transform: translateY(200px);
}
    <div class="all">
  <div class="container">
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search