html - Trying to apply padding and border to my CSS style

Question

I've been trying to style a div and put border and padding to see better the structure, but do not work. Below the code:

#div1ad {width: 96%; height:40px; max-width: 1140px; min-width: 200px; margin-bottom: 5px; padding: 0 0 0 45px; border: 1px dashed red;}

#div1ad div {display: inline-block; margin: 2px 10px 0 1px; font-family: Arial; border: 1px dashed black;}

#div1ad>form>input{float: right; margin-right: 5px; width:15em; height:2.5em; color: #3c4043; font-family: Verdana; font-size: 12px; background-color: #f8f9fa; border-radius: 5px 5px; border: 0}

#div1ad>form>input[type=submit]:hover {border: 1px solid #DCDCDC; box-shadow: 0px 2px 2px silver;}

#div1ad>form>input[type=submit]:focus {outline: none;}

#div1ad>form>input[type=submit]:active {border: 1px solid #349bff;}

<div id="div1ad">
  <form action="index.html">
    <input type="submit" value="Search">
  </form>
</div>

标签： htmlcss

Answer 1

#div1ad {width: 96%; height:40px; max-width: 1140px; min-width: 200px; 
margin-bottom: 5px; margin:2%; border: 1px dashed red;}
#div1ad div {display: inline-block; margin: 2px 10px 0 1px; font- 
family: Arial; border: 1px dashed black;}
#div1ad>form>input{float: right; margin-right: 5px; width:15em; 
height:2.5em; color: #3c4043; font-family: Verdana; font-size: 12px; 
background-color: #f8f9fa; border-radius: 5px 5px; border: 0}
#div1ad>form>input[type=submit]:hover {border: 1px solid #DCDCDC; box- 
shadow: 0px 2px 2px silver;}
#div1ad>form>input[type=submit]:focus {outline: none;}
#div1ad>form>input[type=submit]:active {border: 1px solid #349bff;}

参考的小提琴链接 https://jsfiddle.net/tushar22/tucgf8mw/3/