I want help for setup of top and bottom margin of this search engine coding. I want 20px top and 100px bottom margin

here are the coding of search engine

#search-box-danger {margin:0 auto;height: 36px;position:relative;width:100%;float:none;}

#bo-search-box{padding:0;background:#fff;height: 35px;position:relative;line-height:1.5em;font-weight:normal;margin:0;border-radius:5px;border:1px solid #ddd;}

.bo-sb-buttonwrap {border-top-right-radius: 5px;border: none;cursor: pointer;position: absolute;height: 35px;right: 0;border-bottom-right-radius: 5px;width: 14%;display: block;top: 0;background: #d9534f;}

.bo-sb-buttonwrap:hover {background-color: #c9302c;}

.bo-sb-submit {height: 35px;right: 50%;background: transparent;position: absolute;width: 35px;cursor: pointer;margin-right: -17.5px;margin-top: -17.5px;top: 50%;border: none;}

.bo-sb-submit:after {position: absolute;border: 2px solid white;left: 10px;height: 8px;content: '';top: 9px;width: 8px;border-radius: 50%;box-sizing: content-box;}

.bo-sb-submit:before {width: 2px;position: absolute;transform: rotate(-35deg);left: 21px;content: '';top: 19px;height: 8px;background: white;}
#bo-sb-input {outline: none;border-top-left-radius: 5px;padding: 0 15px;transition: all 0.5s;width: 84%;border: none;position: absolute;height: 35px;background-color: #fff;color: #333;border-bottom-left-radius: 5px;}
#bo-sb-input:focus {outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
<div id="search-box-danger">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>

What should have 20px top and 100px bottom margin?
Do you have a live version of your project? like on codepen, repl.it, jsfiddle…

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


it is much more readable if you put each css rule on their own line, but that’s your choide

what elements should have those properties you are saying?
what have you tried?

Please put the code on something like Codepen and post a link when asking for help with something like this.

I assume the paragraph is outside the search-box-danger div?

#search-box-danger {
  /* 20px top, 100px bottom */
  margin: 20px auto 100px auto;
  height: 36px;
  position: relative;
  width: 100%;
  float: none;