Why is there a default margin separating the input from the text?

HTML-CSS
#1

Why aren’t they stuck together?

How would I get rid of that empty space?
So I can set my own margin.

I cannot figure this out at all.

https://jsfiddle.net/vd3zxLtg/9/

.table {
  display: table;
}

.info {
  display: table-cell;
  white-space: nowrap;
}

    <div class="table">
      <div class="info">

        <input id="input" type="text" name="someNameHere" placeholder="someValueHere" />
        <input id="sent" type="submit" value="Set" />

      </div>
    </div>

#2

Answer

p.my-content {
display: table;
margin: 22px auto 0;
#3

I’m not sure how well codepen is to work in, I would mainly use it for displaying minor projects or quickly testing stuff. But I would recommend start using an editor like VS Code. It’s so much easier to debug directly in chrome and see which element’s padding/margin is doing what.

// <p> tags have a default behavior of:
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;

//You can reset all values if the beginning, doing something like:
p, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}

If you want to learn more you can check this reference table

1 Like
#4