CSS margin与padding区别
CSS margin与padding区别
一、介绍
css中位置属性设置有margin与padding两种,其区别简单来说是margin设置外边距,padding设置内边距。
下图为css模型盒:
说明:设置margin,表示设置当前元素离其外一层的距离;
设置padding,表示设置离其内一层元素的距离
二、示例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <style> #testdiv1{ background:#0000FF; padding:0px; margin:0px; } #ul1 { background:#00FF00; } #testdiv2{ background:#0000FF; padding:10px; margin:0px; } #testdiv3{ background:#0000FF; padding:0px; margin:10px; } #testdiv4{ background:#0000FF; padding:10px; margin:10px; } </style> <body> <div id="testdiv1"> <ul id="ul1"> <li id="li1">1</li> <li id="li2">2</li> </ul> </div> <div id="testdiv2"> <ul id="ul1"> <li id="li21">1</li> <li id="li22">2</li> </ul> </div> <div id="testdiv3"> <ul id="ul1"> <li id="li31">1</li> <li id="li32">2</li> </ul> </div> <div id="testdiv4"> <ul id="ul1"> <li id="li31">1</li> <li id="li32">2</li> </ul> </div> </body> </html>
运行效果比较:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。