Does setting margin-top and margin-bottom for inline elements work?

It doesn’t work. (Note that the img and input elements are Inline elements, but they can be set to width and height, and the margin attribute is also applied to them, which behaves like inline-block.)

<! DOCTYPEhtml>          
<html>          
<head>          
    <meta charset="UTF-8">      
    <meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <title>Whether setting margin-top and margin-bottom to inline elements works</title>        
    <style type="text/css">  
        .m-test1{margin: 100px; }.m-test2{margin: 100px; }.m-test3{margin: 100px; }</style>        
</head>          
<body>  
    <div><span class="m-test1">xu</span></div>
    <div><img class="m-test2" src="Https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3240464600, 3985442193 & FM = 27 & gp = 0. JPG"></div>
    <div><input type="text" class="m-test3"></div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>   
    <script type="text/javascript">
    </script>
</body>          
</html>
Copy the code

Note: Welcome to join the web front-end job hunting qq group: 668352707\