Home > Article > Web Front-end > margin-right not working? _html/css_WEB-ITnose
margin-right not working? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:53:362857browse
Why does margin-left work but margin-right not?
aba7b36f87decd50b18c7e3e3c150106
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
52f5d167a5377c9fd33aaba7e27f4f42
b2386ffb911b14667cb8f0f91ea547a7div practice page layout6e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388
#nav{width: 1347px;height:80px; background-color: red;}
#search{width:800px;height:60px;background-color:blue; margin: 0 auto}
#title{width: 600px;background-color: gray;margin: 0 auto;}
#left{width: 300px;height: 200px;margin-left:70px;background-color: black;}
#right{width: 400px;height: 300px;margin-right:100px ;background-color: yellow;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
f40b902761363d2e3d81c252e3c16bdd
eb545d6e9e25f5c0174408f6286375adnavigation16b28748ea4df4d9c2150843fecfba68
cbe460b298883c7f356cf06f11d82f6dsearch16b28748ea4df4d9c2150843fecfba68
ab23ff7ea4f6793c7190043c4bb0707ftitle4cb357c01c5c26722a31d7dc14419690
961dd75297247cb17f67e6948fb06668News16b28748ea4df4d9c2150843fecfba68
933da5eb64e67ee2599877186ac08c97News picture carousel 16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
Reply to discussion (solution)
Browsers render elements from left to right by default. As long as the width of the parent container is not exceeded, if the width of the child container can be accommodated, setting margin-right is useless.
#right{width: 400px;height: 300px;margin-right:100px;background-color: yellow; float:right}
See if it works again
Not all The style attributes all need to play a role
I don’t quite understand what the 1st floor said, does that mean that the effect can be displayed by removing the parent container? Can you explain it in detail?
The outer div: width: 500px;
The inner div: width: 50px;
You set the inner div: margin-right: 50px;
Do you think it will work?
That’s quite right. . . . I wonder if you can understand?
I don’t quite understand what the 5th floor said. In fact, none of my divs have any relationship. They are all independent. They are just inside the content, but I didn’t set the width for the content.
I am a beginner in CSS. Do you understand element positioning? Absolute positioning, relative positioning, and floating positioning. It is suggested that the poster can learn these first.
Margin is to leave some space between the two marks
If you only have one mark and it is on the left, margin-right will have no effect
http://bbs.blueidea.com /thread-2803660-1-1.html
<!doctype html><html><head><meta charset="utf-8"><title>div练习页面布局</title><style type="text/css">#nav{width: 1347px;height:80px;background-color: red;}#search{width:800px;height:60px;background-color:blue; margin: 0 auto}#title{width: 600px;background-color: gray;margin: 0 auto;}#left{width: 300px;height: 200px;margin-left:70px;background-color: black;float:left;}#right{width: 400px;height: 300px;margin-right:100px;background-color: yellow;float:right;}#main{width:900px;}</style></head><body><div id="contener"><div id="nav">导航</div><div id="search">搜索</div><div id="title">标题</div><div id="main"><div id="left">要闻</div><div id="right">新闻图片轮播</div></div></div></body></html> Add float appropriately
If it is not floating, margin-right has no effect
Margin-right has no effect when it is not floating
It does not work because the space contained in the upper layer of your div is large enough. If you want it to work, you can add a float:right to this layer. Someone has replied to yours. Or you can write it with absolute positioning