How to move things to the right in css-CSS Tutorial-php.cn

How to move things to the right in css

醉折花枝作酒筹

Release： 2023-01-06 11:16:08

Original

22241 people have browsed it

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.

How to move things to the right in css

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.

How to move things to the right in css

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>

Copy after login

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;
      }

Copy after login

Screenshot

How to move things to the right in css

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;
      }

Copy after login

Screenshot:

How to move things to the right in css

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!