css代码里的margin为什么不起作用 CSS里的margin值不起作用
css \u4e3a\u4ec0\u4e48\u6709\u65f6MARGIN \u4e0d\u8d77\u4f5c\u7528\uff0ccss\u6709\u65f6MARGIN \u4e0d\u8d77\u4f5c\u7528\u662f\u8bbe\u7f6e\u9519\u8bef\u9020\u6210\u7684\uff0c\u89e3\u51b3\u65b9\u6cd5\u4e3a\uff1a
1\u3001\u65b0\u5efa\u4e00\u4e2aHTML\u6587\u4ef6\uff0c\u547d\u540d\u4e3atest.html\u3002
2\u3001\u4e3a\u4e86\u6d4b\u8bd5\u51fa\u660e\u663e\u7684\u6548\u679c\uff0c\u5728test.html\u4f7f\u7528div\u5b9a\u4e49\u4e86\u4e00\u4e2a\u5e26\u8fb9\u6846\u7684\u6a21\u5757\uff0c\u91cc\u9762\u653e\u4e00\u4e2ap\u6807\u7b7e\u3002\u4e0b\u9762\u4ee5p\u6807\u7b7e\u7684\u5916\u8fb9\u8ddd\u8bbe\u7f6e\u4e3a\u4f8b\uff0c\u8be6\u7ec6\u8bb2\u89e3margin\u7684\u4f7f\u7528\u3002
3\u3001\u4f7f\u7528margin\u8bbe\u7f6ep\u6807\u7b7e\u7684\u5de6\u5916\u8fb9\u8ddd\u3002\u4e3b\u8981\u4f7f\u7528margin-left\u7684\u65b9\u6cd5\u5b9a\u4e49\u5de6\u5916\u8fb9\u8ddd\u7684\u6837\u5f0f\uff0c\u503c\u8d8a\u5927\uff0c\u8ddd\u79bb\u5de6\u8fb9\u5c31\u8d8a\u5927\u3002
4\u3001\u4f7f\u7528margin\u8bbe\u7f6ep\u6807\u7b7e\u7684\u53f3\u5916\u8fb9\u8ddd\u3002\u4e3b\u8981\u4f7f\u7528margin-right\u7684\u65b9\u6cd5\u5b9a\u4e49\u53f3\u5916\u8fb9\u8ddd\u7684\u6837\u5f0f\uff0c\u503c\u8d8a\u5927\uff0c\u8ddd\u79bb\u53f3\u8fb9\u5c31\u8d8a\u5927\u3002
5\u3001\u4f7f\u7528margin\u8bbe\u7f6ep\u6807\u7b7e\u7684\u4e0a\u5916\u8fb9\u8ddd\u3002\u4e3b\u8981\u4f7f\u7528margin-top\u7684\u65b9\u6cd5\u5b9a\u4e49\u4e0a\u5916\u8fb9\u8ddd\u7684\u6837\u5f0f\uff0c\u503c\u8d8a\u5927\uff0c\u8ddd\u79bb\u4e0a\u8fb9\u5c31\u8d8a\u5927\u3002
6\u3001\u4f7f\u7528margin\u8bbe\u7f6ep\u6807\u7b7e\u7684\u4e0b\u5916\u8fb9\u8ddd\u3002\u4e3b\u8981\u4f7f\u7528margin-bottom\u7684\u65b9\u6cd5\u5b9a\u4e49\u4e0b\u5916\u8fb9\u8ddd\u7684\u6837\u5f0f\uff0c\u503c\u8d8a\u5927\uff0c\u8ddd\u79bb\u4e0b\u8fb9\u5c31\u8d8a\u5927\u3002
\u67d0\u4e9b\u76f8\u90bb\u7684margin\u4f1a\u53d1\u751f\u5408\u5e76\uff0c\u79f0\u4e4b\u4e3amargin\u6298\u53e0\u3002
margin\u6298\u53e0\u5e38\u89c4\u8ba4\u77e5\uff1a
margin\u6298\u53e0\u53ea\u53d1\u751f\u5728\u5757\u7ea7\u5143\u7d20\u4e0a\uff1b
\u6d6e\u52a8\u5143\u7d20\u7684margin\u4e0d\u4e0e\u4efb\u4f55margin\u53d1\u751f\u6298\u53e0\uff1b
\u8bbe\u7f6e\u4e86\u5c5e\u6027overflow\u4e14\u503c\u4e0d\u4e3avisible\u7684\u5757\u7ea7\u5143\u7d20\uff0c\u5c06\u4e0d\u4e0e\u5b83\u7684\u5b50\u5143\u7d20\u53d1\u751fmargin\u6298\u53e0\uff1b
\u7edd\u5bf9\u5b9a\u4f4d\u5143\u7d20\u7684margin\u4e0d\u4e0e\u4efb\u4f55margin\u53d1\u751f\u6298\u53e0\uff1b
\u6839\u5143\u7d20\u7684margin\u4e0d\u4e0e\u5176\u5b83\u4efb\u4f55margin\u53d1\u751f\u6298\u53e0\uff1b
\u53ef\u4ee5\u7528padding\u66ff\u4ee3\u3002
所以，要么你就让你的p也是float元素，要么就让p元素clear：left或者both，或者ul和p都不是float
这段代码单独出来是没有问题，不起作用有个能是别的地方给p标签给设置属性了，可以margin-top:100px !important;写。还可以成padding-top:30px;，效果都一样
亲,margin不起作用的可能有：（1）你的元素没有选择正确
(2)你在其他地方同样设置了这个元素的margin属性，那个地方的css优先级要比你现在设置的css的优先级要高
那就是有和这个margin冲突的其他CSS设置，要么不可能不起作用的，你看看是不是被划掉了还是没花掉但不起作用
定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
margin是设置div外边距的，你想设置其中内容居中可以设置text-align:center水平居中
vertical-align:middle垂直居中
vertical-align
定义和用法
vertical-align 属性设置元素的垂直对齐方式。
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
vertical-align的值：
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
绛旓細鍥犱负姣忎釜娴忚鍣涓瀵筯tml鏍囩鐨勯粯璁ゅ杈硅窛鍜屽唴杈硅窛鐨勫间笉鍚岋紝涓轰簡杈惧埌璁╀富娴佹祻瑙堝櫒璁剧疆鍑烘潵鐨勫竷灞鏄剧ず鐩稿悓锛屽垯闇瑕佹妸html涓墍鏈夋爣绛剧殑padding,margin閮借缃负0锛
绛旓細padding:鍐呰竟璺 鏄唴瀹逛笌杈规鐨勮窛绂 margin锛氬杈硅窛 鏄竟妗嗕笌杈圭晫涔嬮棿鐨勮窛绂 float锛氭诞鍔 2涓睘鎬э細宸︽诞鍔 left 鍙虫诞鍔 right 娴姩浜嗕互鍚庡彲浠ユ妸鍧楀厓绱犳敼鍙樹负琛屽唴鍏冪礌
绛旓細 濡傛灉div鐨勫搴︽槸鍥哄畾鐨勶紝涓旇瀹氫簡padding:10px銆俤iv閲岄潰p浼氫笌div鏈10px璺濈锛堝湪娌℃湁鍏朵粬瀹氫綅鎯呭喌涓嬶級锛2:鍦ㄦ枃鏈緭鍏ユ閲屽姞padding锛屽彲浠ヨ鏂囧瓧涓庤竟妗嗘湁璺濈锛岀編瑙備簺銆傛垨鑰呭湪鐢╝鏍囩鍋氭寜閽殑鏃跺欙紝鑳屾櫙鍥句笌鎸夐挳鏂囧瓧浣嶇疆鍙互鐢╬adding鏉ヨ皟 鎬荤粨锛氬畾浣嶇疆鐢margin,鍏朵粬鐢╬adding锛堝鍋氭寜閽紝鏂囧瓧鎺掔増锛...
绛旓細DIV CSS澶栬竟璺濇寚CSS灞炴у崟璇margin锛宮argin鏄缃璞″洓杈圭殑澶栧欢杈硅窛锛屾病鏈夎儗鏅鑹蹭篃鏃犻鑹层1銆乵argin璇硶Margin:10pxMargin鐨勫兼槸鏁板瓧+html鍗曚綅锛屽悓鏃朵篃鍙互涓篴uto锛堣嚜鍔ㄣ佽嚜閫傚簲锛2銆佸簲鐢ㄧ粨鏋凞iv{margin:10px}璁剧疆div瀵硅薄鍥涜竟闂磋窛涓10px3銆丮argin璇存槑margin鏄缃璞″杈硅窛澶栧欢杈硅窛绂汇俶argin鐨勫兼湁涓夌...
绛旓細margin鏄杈硅窛鐨勬剰鎬濓紝褰撲竴涓厓绱犳牱寮忓睘鎬ч噷鏈塵argin:0 auto鏃讹紝骞朵笖鐖跺厓绱犵殑瀹藉害鏄‘瀹氱殑锛屾剰鎬濇槸杩欎釜鍏冪礌澶勪簬鍏剁埗鍏冪礌鐨勫眳涓綅缃紝骞朵笖杩欎釜鍏冪礌鐨勪笂涓嬪杈硅窛涓0銆俶argin杩樻湁鍏朵粬閰嶇疆绫诲瀷锛歮argin-bottom锛氳缃厓绱犵殑涓嬪杈硅窛銆俶argin-left锛氳缃厓绱犵殑宸﹀杈硅窛銆俶argin-right锛氳缃厓绱犵殑鍙冲杈硅窛銆俶argin-...
绛旓細margin鍜宲adding鐢ㄦ潵闅斿紑鍏冪礌锛宮argin鏄殧寮鍏冪礌涓庡杈癸紝padding鏄殧寮鍏冪礌閲岃竟銆備妇涓牀瀛愶細鎯宠薄浣犵珯鍦ㄥ彧鏈変竴涓埧闂寸殑灞嬪瓙锛屼綘涓庢埧闂村澹佷箣闂寸殑璺濈鍙玃adding 鎴块棿澧欏鐨勭殑鍘氬害鍙互鐞嗚В涓鸿竟妗嗙殑瀹藉害锛屾埧瀛愪笌浣犻殧澹侀偦灞呯殑鎴垮瓙闂寸殑璺濈鍙互鐞嗚В涓簃argin銆
绛旓細鍧楀厓绱犲氨鏄細鍗犱竴琛岀殑鍏冪礌锛岃鍐呭厓绱犳槸璺熸嵁鍐呭鐨勫灏戞潵鍗犱綅缃殑锛岃屾诞鍔ㄥ厓绱犳槸涔熸槸璺熸嵁鍐呭鐨勫灏戞潵鍗犱綅缃殑锛屼絾鏄诞鍔ㄤ箣鍚庡氨浼氬彉鎴愬潡鍏冪礌浜嗭紝骞朵笖浼氫粠姝ｅ父鐨勬枃妗ｆ祦涓鍒犻櫎瀹冪殑浣嶇疆锛涘潡鍏冪礌鍙互璁剧疆margin鐨勪笂銆佸彸銆佷笅銆佸乏闂磋窛锛岃鍐呭鍙湁margin鐨勫乏鍜屽彸浼氱敓鏁堬紝娴姩鍏冪礌鐨刴argin璺熷潡鍏冪礌涓鏍 ...
绛旓細margin:澶栬竟璺濄傛寚鍧楃骇鍏冪礌涓庡潡鍧楃骇鍏冪礌涔嬮棿鐨勮窛绂汇俻adding:鍐呰竟璺濄傛寚琛屽唴鍏冪礌涓庡潡绾у厓绱犱箣闂寸殑璺濈锛屼篃鍙互鏄唴瀹逛笌鍏冪礌涔嬮棿鐨勮窛绂汇傚叾涓疄绾块儴鍒嗘槸妗嗙殑瀹為檯澶у皬锛屾渶澶栧眰鐨勮櫄绾挎槸妗嗗疄闄呭崰浜嗗澶у湴鏂
绛旓細2锛% 鍩轰簬鐖跺厓绱犵殑瀹藉害鐨勫唴杈硅窛鐨勯暱搴︼紙3锛塧uto 娴忚鍣ㄨ绠楀唴杈硅窛锛4锛塱nherit 瑙勫畾搴旇浠庣埗鍏冪礌缁ф壙鍐呰竟璺3銆佹祻瑙堝櫒鍏煎闂锛1锛夋墍鏈夋祻瑙堝櫒閮芥敮鎸乸adding灞炴э紙2锛変换浣曠増鏈琁E閮戒笉鏀寔灞炴у尖渋nherit鈥濅簩銆margin1銆佽娉曠粨鏋勶紙1锛塵argin-left:10px; 宸﹀杈硅窛锛...
绛旓細margin鏄杈硅窛锛屽彲浠ョ悊瑙ｄ负涓や釜鐩搁偦鍏冪礌鐨刡order(鍗宠竟妗)涔嬮棿鐨勮窛绂汇傚綋margin鍊间负璐熸暟鏃讹紝琛ㄧ幇涓烘媺杩戠浉閭诲厓绱犱箣闂寸殑璺濈銆傝繖閲屽洖绛旂殑姣旇緝鐗囬潰...
