CSS marginÈ«ÃæÁ˽â(9)
<div class="box"> <p>¿ÉÊÇÎÒ¾ÍÊÇÏëÈÃ×ÓÔªËؾàÀ븸ԪËصÄÉϱ߽ç25px°¡£¬ÎÒ²»ÏëÈÃËüÃǺϲ¢Ñ½¡£</p> <p>ºÜ¼òµ¥£¬¸ø¸¸ÔªËؼӸö±ß¿ò£¬ËüÃǾÍÎÞ·¨Ç×ÃܽӴ¥ÁË£¬¾Í²»»áºÏ²¢ÁË°¡¡£</p> <p>»òÕ߸ø¸¸ÔªËØÉèÖÃpaddingÒ²ÊÇ¿ÉÒÔµÄม£</p> </div> </div> </body> </html> Ïû³ý´¹Ö±·½ÏòÉÏmarginºÏ²¢µÄ·½·¨£º¸ø¸¸ÔªËؼÓborder»òÕß¼Ópadding£¬´òÆƸ¸ÔªËØÓë×ÓÔªËØmarginÖ®¼äµÄÇ×ÃܽӴ¥¼´¿É¡£ marginºÏ²¢µÄ¹æÔò£º
XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>marginºÏ²¢¹æÔò</title> <style> .container { width: 300px; height: 500px; margin: 50px; background-color: orange; float: left; border: 1px solid black; }
.box1,.box2,.box3, .box4,.box5,.box6 { width: 200px; height: 150px; margin: 30px auto; background-color: cyan; text-align: center; line-height: 150px; }
.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
.box3 { margin-bottom: 30px; }
.box4 { margin-top: -30px; }
.box5 { margin-bottom: -30px; }
.box6 { margin-top: -50px; background-color: green; }
p { width: 220px; margin:10px auto; font-size: 16px; line-height: 1.5; }
</style> </head>
<body> £¨±à¼£ºASPÕ¾³¤Íø£© |