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

1

here are the coding of search engine

<style>
#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);}
</style>
<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>
</form>
</div>
2

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.

markdown_Forums

3

css
css1361×554 181 KB

4

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?

5

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