margin-right not working? _html/css_WEB-ITnose-HTML Tutorial-php.cn

margin-right not working? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:53:36

Original

2899 people have browsed it

Why does margin-left work but margin-right not?

div practice page layout

navigation

title

News

News picture carousel

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>

Copy after login

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