How to move button up with CSS

CSS method to move the button up: First open the corresponding HTML file; then add the style ".btn{margin-top: -10px;}" to the button to move it up.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

Use the margin-top attribute to set the position of the button.

Assume that the button's class is btn and moves up 10 pixels.

css:

.btn{
margin-top: -10px;
}

margin: Set the width of all margins of an element, or set the width of the margins on each side.

The vertically adjacent margins of block-level elements will be merged, while inline elements will not actually occupy the top and bottom margins. The left and right margins of inline elements are not merged. Likewise, the margins of floated elements are not merged. It is allowed to specify negative margin values, but use caution when using them.

Negative values ​​are allowed.

Extended information:

CSS margins:

The blank area surrounding the element border is the margins. Setting margins creates additional "white space" outside the element.

The easiest way to set margins is to use the margin property, which accepts any length unit, percentage value, or even negative value.

The margin property accepts any length unit, which can be pixels, inches, millimeters, or ems.

margin can be set to auto. A more common approach is to set a length value for the margins.

The default value of margin is 0, so if a value is not declared for margin, no margin will appear. However, in practice, browsers already provide predetermined styles for many elements, and margins are no exception.

Therefore, if no margin is declared for the p element, the browser may apply one on its own. Of course, as long as you specifically declare it, the default style will be overridden.

You can use any of the following properties to set only the margin on the corresponding top without directly affecting all other margins:

margin-top, margin-right, margin-bottom, margin -left.

【Recommended learning: css video tutorial】

The above is the detailed content of How to move button up with CSS. For more information, please follow other related articles on the PHP Chinese website!