css - How can I stop my html offset margins aggregating

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65895130/how-can-i-stop-my-html-offset-margins-aggregating

Answer 1

just add display:block; and remove float:left;

check the snippet

.dynamic-key-button {
display:block;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  border: solid;
  cursor: pointer;
  padding-bottom: 12px;
  transition-duration: 0.4s;
  margin-left: 9px;
}

<form class="my-form" id="atlas-info">
  <div id="property-header">Atlas Settings</div>
  <hr />
  <div class="form-group" id="tag-entry">
    <label>Select tagging group: </label>
    <br />
    <input type="text" name="name" id="tree">
  </div>
  <div class="input-group">Dynamic key: </div>
  <button type="button" class="dynamic-key-button" id="filter-setting"></button>
  <label class="dynamic-key-text">Show if / show if not</label>
  <br /> @*below should not be hard coded, needs to be a loop of some sort*@
  <button type="button" class="dynamic-key-button" id="organisation"></button>
  <label class="dynamic-key-text">Organisation</label>
  <br />
  <button type="button" class="dynamic-key-button" id="job-executor"></button>
  <label class="dynamic-key-text">Job executor</label>
  <br />
  <button type="button" class="dynamic-key-button" id="job-step"></button>
  <label class="dynamic-key-text">Job step</label>
  <br />
  <button type="button" class="dynamic-key-button" id="product"></button>
  <label class="dynamic-key-text">Product</label>
  <br />
</form>