Why does margin-left work but margin-right not?
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