[TIL] [CSS] Html 요소 우측 정렬하기 (margin: auto)

* TIL 작성방법

1. 어떤 문제가 있었는지?

2. 내가 시도해본 것들

3. 해결

4. 알게 된 점

---

1. 어떤 문제가 있었는지?

- 버튼만 오른쪽으로 옮기고 싶음

- 아래 사진 참고

이렇게 된 버튼을

이렇게 바꾸기

---

2. 내가 시도해 본 것들

https://www.daleseo.com/css-align-right/

CSS로 HTML 요소 우측 정렬하기 (Flexbox/Grid)

- 위의 글 참고함

- 어차피 버튼이 속한 div에 flex가 설정되어 있어서 flex 방법을 사용하기로 함

---

3. 해결

/*부모 div*/
.inputTodoBox{
  display: flex;
}

/*자식 button*/
.inputTodoBox > button{
  margin-left:auto;
}

- maring-left를 사용하니 해결됨!

- 왜 해결되나?

: 이는 margin : auto의 특성을 이해하면 된다

 

*margin

- 요소의 네 방향 바깥 여백 영역

붉은 색부분! border(테두리)를 벗어난 곳이 margin임!!

margin: auto

auto  남은 공간을 최대한 확보하기 위한 특성을 가지고 있음 ! 그런데 이건 상하, 좌우에 따라 조금 다름

margin-left : auto 요소를 오른쪽으로 이동시켜 왼쪽 여백을 최대화함

margin-right : auto 요소를 왼쪽으로 이동시켜 오른쪽 여백을 최대화함

margin-top, margin-bottom : 수직 방향 여백엔 auto 값을 설정하면 해당 여백은 자동으로 0 이 되어버림 !

 

- 그래서 위와 같이 버튼을 오른쪽 끝으로 보내려고 할 땐,

margin-left:auto;

사용하면 해결이 된다~

---

4. 알게 된 점

- margin의 특성