Home >Web Front-end >CSS Tutorial >How to move things to the right in css
How to move right: 1. Use margin-left to move div to the right. You only need to set the "margin-left: value" style for the next box; 2. Use margin-right to move div to the right. , just set the "margin-right: value" style to the previous box.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The div object box is offset to the right. Use css to move the div to the right by a certain distance - tutorial example of moving div to the right.
The div is offset to the right by a certain distance. You can use margin. It can also be implemented using padding. It depends on how to choose flexibly in different situations. Here thinkcss introduces various CSS layout div methods to move to the right.
The former is a blue div and the latter is a red div. In this case, there is a flexible way to float the red div to the right and offset it by a certain distance. The tutorials are as follows.
Basic instructions:
In order to facilitate the example, the two boxes are side by side, we set the float style for both divs, and set the same width and height for the two div boxes at the same time.
1. Set margin-left to move the div to the right
If there is a border or background color
Both divs are set to float:left layout left css style, To move the second (red) div a little further to the right, you usually set margin-left on the second (later red) div.
Code before setting the div to move a little to the right:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div向右移一定距离实例</title>
<style>
.box-a,
.box-b {
width: 200px;
height: 100px;
float: left;
}
.box-a {
border: 1px solid #00f;
}
.box-b {
border: 1px solid #f00;
}
</style>
</head>
<body>
<div class="box-a">第一个（前者）div</div>
<div class="box-b">第二个（后者）div</div>
</body>
</html>Operation to set the left outer distance style of the second div
Key CSS code:
.box-a,
.box-b {
width: 200px;
height: 100px;
float: left;
}
.box-a {
border: 1px solid #00f;
}
.box-b {
border: 1px solid #f00;
margin-left: 20px;
}Screenshot
2. Use margin-right to put a certain distance to the right of the second div
Instructions
The previous method is Directly set the margin-left of the div to be moved right to a certain distance to the left, thereby moving the div itself to the right.
If you use margin-right, you cannot set the div that needs to be moved to the right. Instead, you can set the former (blue div) to move the red div to the right by a certain distance.
CSS code:
.box-a,
.box-b {
width: 200px;
height: 100px;
float: left;
}
.box-a {
border: 1px solid #00f;
margin-right: 20px;
}
.box-b {
border: 1px solid #f00;
}Screenshot:
Use the margin-right outer right margin of the blue div to make the red color natural Rely on a certain distance from the blue div to move the div to the right
Recommended learning: css video tutorial
The above is the detailed content of How to move things to the right in css. For more information, please follow other related articles on the PHP Chinese website!