搜索 用户中心
  • 欢迎光临三九网站目录 , 快审50元/站,快审请联系站长QQ:704918986
    当前位置 首页 > 教程收藏 > CSS教程
    CSS控制外边距
        发布时间:2015-11-24 08:31:25    发布作者:admin

    HTML代码

    <div class="mt-10">距上10像素</div>

    .mt 表示上边距,.mb 表示下边距,.ml 表示左边距,.mr 表示右边距W8l三九网站目录

    支持任何块级元素,如果行内元素要想使用margin,请使用 display:block 先将其转化为块级元素W8l三九网站目录

    CSS代码

    .mt-5{margin-top:5px}/*距上5像素*/
    .mt-10{margin-top:10px}/*距上10像素*/
    .mt-15{margin-top:15px}/*距上15像素*/
    .mt-20{margin-top:20px}/*距上20像素*/
    .mt-25{margin-top:25px}/*距上25像素*/
    .mt-30{margin-top:30px}/*距上30像素*/
    .mt-35{margin-top:35px}/*距上35像素*/
    .mt-40{margin-top:40px}/*距上40像素*/
    .mt-50{margin-top:50px}/*距上50像素*/ 
    .mb-5{margin-bottom:5px}/*距下5像素*/
    .mb-10{margin-bottom:10px}/*距下10像素*/
    .mb-15{margin-bottom:15px}/*距下15像素*/
    .mb-20{margin-bottom:20px}/*距下20像素*/
    .mb-25{margin-bottom:25px}/*距下25像素*/
    .mb-30{margin-bottom:30px}/*距下30像素*/
    .mb-35{margin-bottom:35px}/*距下35像素*/
    .mb-40{margin-bottom:40px}/*距下40像素*
    .mb-50{margin-bottom:50px}/*距下50像素*/ 
    .ml-5{margin-left:5px}/*距左5像素*/
    .ml-10{margin-left:10px}/*距左10像素*/
    .ml-15{margin-left:15px}/*距左15像素*/
    .ml-20{margin-left:20px}/*距左20像素*/
    .ml-30{margin-left:30px}/*距左30像素*/
    .ml-40{margin-left:40px}/*距左40像素*/
    .ml-50{margin-left:50px}/*距左50像素*/ 
    .mr-5{margin-right:5px}/*距右5像素*/
    .mr-10{margin-right:10px}/*距右10像素*/
    .mr-15{margin-right:15px}/*距右15像素*/
    .mr-20{margin-right:20px}/*距右20像素*/
    .mr-30{margin-right:30px}/*距右30像素*/
    .mr-40{margin-right:40px}/*距右40像素*/
    .mr-50{margin-right:50px}/*距右50像素*/

    注意: 上下模块不要同时使用margin-top和margin-bottom,会存在兼容性问题,所以上下模块之间的间距统一使用下一个模块的margin-top来实现,另一个优点是:如果没有下一个模块也不会多出一段空隙。W8l三九网站目录

    margin的兼容性问题:div设置左浮动,margin-left在ie中会出现2倍边距bug,解决办法:在style里面添加display:inline。W8l三九网站目录


    W8l三九网站目录

    上一篇:CSS线条
    最新资讯
    最新收录
    热门资讯