Home > Web Front-end > CSS Tutorial > A question about the ineffectiveness of margin-right in css

A question about the ineffectiveness of margin-right in css

巴扎黑
Release: 2018-05-28 11:33:01
Original
3556 people have browsed it

margin-rightIt actually works, but the effect is not displayed when the default is the standard stream. What if we break away from the standard stream? Thinking of this, I immediately added one to the css file: float:right; and then I can see the effect of margin-right during testing. Today in the group, someone raised a question about the ineffectiveness of margin-right in CSS. The CSS code and HTML code are as follows:

The code is as follows:

.style1{ 
width:400px; 
height:440px; 
background-color
:red; 
border:5px solid silver; 
margin-top
:20%; 
margin-right:30%; 
}
Copy after login

The code is as follows:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 
<body> 
<p class="style1"><img src="bei.jpg"></p> 
</body> 
</html>
Copy after login

Copy his code and change it to a picture, I will do it I took a test and it really didn’t work.

Could it be that top will hide the effect of right? Or does it have to do with the order? These were later proven to be wrong ideas. Combined with w3school's vague memory of margin-right: the browser is left-aligned by default. After inspiration, margin-right actually works, but the effect is not displayed when the default is the standard flow. What if we break away from the standard stream? Thinking of this, I immediately added one to the css file: float:right; and then I can see the effect of margin-right during testing.

It is not possible to use float:left, which is similar to the default situation.
PS: Regarding the reason why the right attribute is invalid: the right attribute is only valid when position is absolute, and the default position value is static, so the right attribute is invalid. It is recommended not to use the right attribute if you can't use right.

The above is the detailed content of A question about the ineffectiveness of margin-right in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template