对行内元素设置margin-top和margin-bottom是否起作用

对行内元素设置margin-top 和margin-bottom是否起作用?

不起作用。(需要注意行内元素的替换元素img、input,他们是行内元素,但是可以为其设置宽高,并且margin属性也是对其起作用的,有着类似于Inline-block的行为)

<!DOCTYPE html>          
<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>对行内元素设置margin-top和margin-bottom是否起作用</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>
备注:欢迎加入web前端求职招聘qq群:668352707
posted @ 2018-02-23 09:53  徐同保  阅读(333)  评论(0编辑  收藏  举报