Button positioning and padding behaving like margin - Html

mutedJunior
February 22, 2023
178 views
0 votes
2 Answers

I’m trying to make a simple profile reviewing react webapp for github and i’m new to CSS. I have a problem with positioning a button beside a textbox.

    .searchParent{
    margin: 50px;
    box-sizing: border-box;
}

.searchTitle{
    padding-left: 5px;
    margin: 4px;
    color: white;
    font-weight: normal;
    font-size: 0.8rem;
}

.searchText{
    width: 15%;
    height: 40px;
    background-color: #292929;
    margin: 8px;
    margin-right: 0;
    border-radius: 6px;
    border-style: none;
    color: white;
    padding: 15px;
    box-sizing: border-box;
    outline: none;
}

.searchBtn{
    border-style: none;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
}


.headText{
    color: white;
    font-size: 19px;
    width: 14%;
    font-weight: normal;
    margin: 50px;
}

body{
    background-color: #212121;

}

    <div class="parent">
        <p class="headText">Enter a GitHub username, to see the magic.</p>
        <div class="searchParent">
            <p class="searchTitle">GitHub username:</p>
            <input class="searchText" placeholder='@username' type='text' ></input>
            <button  class="searchBtn"></button>
        </div>
    </div>

so in .searchBtn class in css when I set a margin for the button it stretches the parent height and doesnt act like the margin set for textbox with .searchText where it just moves the textbox itself and not the whole parent box

I was expecting to have the same result as textbox when I set my margin-top same as the textbox
and have my button aligned with my textbox

I tried different ways but it doesnt looklike a clean code like setting position relative and moving the button itself with top and left and etc.
note that with setting padding-top for button everything inside the button gets padding which should be the only result but it acts exactly like margin and moves the button itself and I don’t understand this behaviour with padding
why does the button move like it has a margin where padding should just move content inside of it?
I tried "box-sizing: border-box;" for parent and button itself and it didn’t help

Answers

If you apply vertical-align: top; to that button, you can use margin-top: 8px (i.e. same as for the search text box before it) to align it with the search field. (display is inline-block by default for both, and the default vertical alignment for the button is baseline)

.searchParent{
    margin: 50px;
    box-sizing: border-box;
}

.searchTitle{
    padding-left: 5px;
    margin: 4px;
    color: white;
    font-weight: normal;
    font-size: 0.8rem;
}

.searchText{
    width: 15%;
    height: 40px;
    background-color: #292929;
    margin: 8px;
    margin-right: 0;
    border-radius: 6px;
    border-style: none;
    color: white;
    padding: 15px;
    box-sizing: border-box;
    outline: none;
}

.searchBtn{
    border-style: none;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    vertical-align: top;
    margin-top: 8px;
}


.headText{
    color: white;
    font-size: 19px;
    width: 14%;
    font-weight: normal;
    margin: 50px;
}

body{
    background-color: #212121;

}

<div class="parent">
        <p class="headText">Enter a GitHub username, to see the magic.</p>
        <div class="searchParent">
            <p class="searchTitle">GitHub username:</p>
            <input class="searchText" placeholder='@username' type='text' ></input>
            <button  class="searchBtn"></button>
        </div>
    </div>

I put the input and the button inside an extra div and gave that div some styling to achieve what you want. Generally you want to structure your dom like this using display flex so that your css doesn’t get too cluttered.

Also this allows you to easier add more visual elements to that search bar and also manages the padding in one class rather than for the button and the input seperately.

.searchParent {
  margin: 50px;
  box-sizing: border-box;
}

.searchTitle {
  padding-left: 5px;
  margin: 4px;
  color: white;
  font-weight: normal;
  font-size: 0.8rem;
}

.searchText {
  width: 15%;
  height: 40px;
  background-color: #292929;
  border-radius: 6px;
  border-style: none;
  color: white;
  padding: 15px;
  box-sizing: border-box;
  outline: none;
}

.searchBtn {
  border-style: none;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
}

.headText {
  color: white;
  font-size: 19px;
  width: 14%;
  font-weight: normal;
  margin: 50px;
}

body {
  background-color: #212121;
}

.searchControls {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

<div class="parent">
  <p class="headText">Enter a GitHub username, to see the magic.</p>
  <div class="searchParent">
    <p class="searchTitle">GitHub username:</p>
    <div class="searchControls">
      <input class="searchText" placeholder='@username' type='text'>
      <button class="searchBtn"></button>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Button positioning and padding behaving like margin – Html

Answers