# Changing the margin size

**URL:** <https://forum.freecodecamp.org/t/changing-the-margin-size/511119>\
**Category:** Curriculum Help\
**Tags:** html, css\
**Created:** [May 24, 2022, 6:43am UTC](https://forum.freecodecamp.org/t/changing-the-margin-size/511119 "2022-05-24T06:43:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dan2006](https://avatars.discourse-cdn.com/v4/letter/d/ea666f/32.png) [@Dan2006](https://forum.freecodecamp.org/u/Dan2006)\
**Post date:** [May 24, 2022, 6:43am UTC](https://forum.freecodecamp.org/t/changing-the-margin-size/511119/1 "2022-05-24T06:43:49Z")

</div>

I have the below code

```auto
input[type="submit"] {

  display: block;

  width: 60%;

  min-width:300px;

  margin: 1em;

  height: 2em;

  font-size: 1.1rem;

  background-color: #3b3b4f;

  border-color: white; 

}

```

I want to change the `margin` property to include `1em` on the top and bottom. I want to use the existing `margin` property to include `1em` on the top and bottom.

---

<div class="post-metadata">

**Author:** ![Cryptic\_X](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cryptic_x/32/258542_2.png) [@Cryptic\_X](https://forum.freecodecamp.org/u/Cryptic_X)\
**Post date:** [May 24, 2022, 6:47am UTC](https://forum.freecodecamp.org/t/changing-the-margin-size/511119/2 "2022-05-24T06:47:41Z")

</div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (\</\>) to add backticks around text.

[![](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif) ](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (’).

* * *

> [@Dan2006](#):
>
> I want to change the `margin` property to include `1em` on the top and bottom.

You can use the `margin-top` and the `margin-bottom` separately,  
Or u can use the `margin` property and set the top and bottom to 1em and the left and right to 0.

---

<div class="post-metadata">

**Author:** ![Dan2006](https://avatars.discourse-cdn.com/v4/letter/d/ea666f/32.png) [@Dan2006](https://forum.freecodecamp.org/u/Dan2006)\
**Post date:** [May 24, 2022, 7:12am UTC](https://forum.freecodecamp.org/t/changing-the-margin-size/511119/3 "2022-05-24T07:12:14Z")

</div>

how do i implement the second option that you gave please

---

<div class="post-metadata">

**Author:** ![Cryptic\_X](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cryptic_x/32/258542_2.png) [@Cryptic\_X](https://forum.freecodecamp.org/u/Cryptic_X)\
**Post date:** [May 24, 2022, 7:23am UTC](https://forum.freecodecamp.org/t/changing-the-margin-size/511119/4 "2022-05-24T07:23:47Z")

</div>

Using the margin property you can declare it using two values,  
You might be knowng to declare margins using 4 values. Similarly you can declare the margin with two value, the first for the top and bottom values, the second for left and right values.

Example:

```auto
margin: top-bottom left-right /* This is the syntax */

/*Example*/
margin: 10px auto; /* This sets the top and bottom margin to 10px and the
left and right to auto */

```

---

<div class="post-metadata">

**Author:** ![Alabastor](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Alabastor](https://forum.freecodecamp.org/u/Alabastor)\
**Post date:** [May 24, 2022, 7:24am UTC](https://forum.freecodecamp.org/t/changing-the-margin-size/511119/5 "2022-05-24T07:24:53Z")

</div>

Using just `margin` is the shorthand version. To understand it better I suggest you look over this page from MDN.

> **[margin - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)**
>
> The margin CSS shorthand property sets the margin area on all four sides of an element.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [November 22, 2022, 7:25pm UTC](https://forum.freecodecamp.org/t/changing-the-margin-size/511119/6 "2022-11-22T19:25:27Z")

</div>

Closed on November 22, 2022, 7:25pm UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.