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

Home

Web Front-end

CSS Tutorial

How to move things to the right in css

醉折花枝作酒筹

Jun 02, 2021 am 10:34 AM

cssMove right

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>

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

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

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!

Statement

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

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

See all articles