How can I stop my html offset margins aggregating

Question

I am adding buttons in an html form. There is an issue where the margin keeps growing by the width of the margin plus the width of the button on the previous row, as below:

I'm trying to make it so that all the buttons have an equal margin from the left.

My html looks like this:

<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>

And my CSS as below:

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

}

Any help would be appreciated.

score 0 · Accepted Answer · answered Jan 26 '21 at 02:34

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>

How can I stop my html offset margins aggregating

1 Answers1