width和padding之間的關係介紹:本章節簡單介紹一下width和padding之間的關係。主要的疑惑在於,width到底包不包含padding,其實他們的關係非常的單純,根本不搭調。之所以會有很多朋友將其搞混是因為他們將width屬性和元素的寬度這兩個概念混為一談了。width屬性值並不一定
width和padding之間的關係介紹:
本章節簡單介紹一下width和padding之間的關係。
主要的疑惑在於,width到底包不包含padding,其實他們的關係非常的單純,根本不搭調。
之所以會有很多朋友將其搞混是因為他們將width屬性和元素的寬度這兩個概念混為一談了。
width屬性值並不一定就是元素的實際寬度,看如下代碼實例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #top{ width:300px; height:150px; background:#CCC; margin-bottom:20px; } #bottom{ width:300px; height:150px; background:#CCC; margin-bottom:20px; padding-left:50px; } </style> </head> <body> <div id="top">螞蟻部落</div> <div id="bottom">螞蟻部落</div> </body> </html>
從上面的代碼可以看到width就是width,padding就是padding。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16797
更多內容可以參閱:http://www.softwhy.com/divcss/