分类目录 共计收录4274站; 资讯文章4395篇; 待审网站 637站; 当月收录0站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > CSS教程

CSS控制外边距

HTML代码

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

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

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

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来实现,另一个优点是:如果没有下一个模块也不会多出一段空隙。mBQ网站目录

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


mBQ网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->