Get what x% of an element is

Issue

I'm trying to set the margins of an HTML element to be x% of its size. Tried using margin-bottom: 50% or margin-bottom: 50vm but it gets x% of the screen size.

Code:

#task_box {
  margin-bottom: 1%;
  display: block;
}

<input type="text" id="task_box">
<input type="text" id="task_box">
<input type="text" id="task_box">

I want to set this to the task_box object.

Solution

I think the only way to do this is using JS.

const taskBoxes = document.querySelectorAll(".task_box");


taskBoxes.forEach(taskBox => {
  var height = taskBox.offsetHeight;
  var marginBottom = height / 2;
  taskBox.style.marginBottom = marginBottom + 'px';
});

.task_box {
  display: block;
}

<input type="text" class="task_box">
<input type="text" class="task_box">
<input type="text" class="task_box">

Answered By - saleh