CSS를 사용하면서 몇가지 의문점이 들어서 정리해보았습니다.
1. CSS 소수점을 써도 되는걸까?
2. padding VS margin 적절하게 쓰는 법은 어떤게 있을까?
3. inline 요소들은 1px씩 여백이 생기는 이유가 뭘까?
4. 가로배치할때 inline-block, float, flex 어떤걸 써야 할까?

CSS 소수점을 써도 될까?

결론은 된다 입니다.
소수점을 사용하여 세밀한 조정이 가능합니다.

그러나 몇가지 주의할 사항이 있습니다.
아래 리스트를 참고해서 사용하면 될 것 같습니다.

• 브라우저 지원: 오래된 브라우저 버전에서는 일부 속성에 대한 소수점 값 지원이 제한될 수 있습니다.
  따라서 프로젝트의 브라우저 호환성을 고려하여 소수점 사용을 결정해야 합니다.
• 유효한 숫자 표기: CSS는 유효한 숫자 표기를 따라야 합니다.
  유효한 CSS 숫자 표기에는 소수점 앞에 0이 없는 경우, 소수점 뒤에 0으로 끝나지 않는 경우 등이 포함됩니다.
  예를 들어, 0.5는 유효한 숫자이지만 .5는 유효하지 않은 숫자입니다.
• 렌더링 정밀도: 일부 브라우저는 소수점 값을 렌더링할 때 정밀도를 제한할 수 있습니다.
  따라서 매우 작은 소수점 값을 사용할 경우 브라우저별로 렌더링 결과가 다를 수 있습니다.

padding VS margin 무엇을 써야 할까?

요약하면 padding과 margin은 서로 다른 목적을 가지고 있으며, 상황에 맞게 선택하여 사용해야 합니다. 일반적으로는 요소의 내부 여백을 조정하기 위해서는 padding을 사용하고, 요소들 사이의 간격을 설정하기 위해서는 margin을 사용하는 것이 일반적입니다.

제가 생각한 적절한 방법은 아래와 같습니다.

[광고]

• padding은 ‘나’ 안에 자식들과 간격을 둘 때 margin은 ‘나’ 와 ‘내 형제’와 간격을 둘 때
• padding을 사용하면 좋은 조건
  • background와 border를 고려하여 간격을 줄 때
  • table에 td 넓이조정할때 (나의 개인적인 생각 밑 주소에 적혀있는 답변과 조금 다름 TD가 뭔지 잘 모르겠…)
• 위아래로 margin 중첩이 일어나기때문에 이럴때 padding 쓰임을 고려할 수 있을 듯

inline 요소를 사용하면 왜 1px 씩 여백이 생길까?

CSS에서 inline 요소들이 1px씩 여백이 발생하는 이유는 inline 요소들이 텍스트를 감싸는 특성 때문입니다.
HTML에서 일반적인 텍스트는 줄바꿈 없이 이어져야 하므로, 여백 없이 텍스트가 나열됩니다.
이와 달리 inline 요소들은 다른 inline 요소나 텍스트를 포함하여 함께 표시되어야 하기 때문에, 각각의 요소 사이에는 1px의 공간이 생기는 것처럼 보입니다.
이러한 여백은 inline 요소들의 글자 크기와 관련이 있습니다.
inline 요소의 글자 크기가 얼마나 되는지에 따라 여백이 조정됩니다. 예를 들어, inline 요소의 글자 크기가 16px라면, 여백도 16px의 약 1/2인 1px 정도가 됩니다.

이러한 여백은 여러 inline 요소들이 함께 사용될 때 중첩된 요소들 사이의 간격을 조정하는 데 도움을 줍니다.

이러한 여백을 제거하는 방법은 여러 가지가 있습니다.
일반적으로 font-size 속성을 0으로 설정하거나, 요소들 사이의 공백을 제거하는 방법을 사용할 수 있습니다.

하지만 이러한 방법은 텍스트가 필요한 경우에는 사용하기 어렵거나 적합하지 않을 수 있으므로 상황에 맞게 선택해야 합니다.

가로배치할 경우 inline-block VS float VS flex 어떤걸 쓰는게 좋을까?

물론 구현하려는 상황에 따라 달라지는 점 참고 부탁드립니다.
상황에 맞게 사용하기 위해서 각 방법의 특징을 알아보겠습니다.

• inline-block:
  • display: inline-block; 속성을 사용하여 요소를 가로로 배치합니다.
  • 요소들이 텍스트처럼 흐르며 가로로 정렬됩니다.
  • 일반적으로 줄바꿈 없이 요소를 나란히 배치할 수 있습니다.
  • 요소의 크기나 여백을 조정하기 어려울 수 있습니다.
  • 가로 공간이 부족하면 요소들이 자동으로 줄바꿈될 수 있습니다.
• float:
  • float: left;또는float: right;속성을 사용하여 요소를 가로로 배치합니다.
  • 요소들이 부유(floating)되어 텍스트가 그 주위를 감싸게 됩니다.
  • 요소의 위치를 상대적으로 조정할 수 있습니다.
  • 부모 요소의 높이를 제대로 계산하기 어렵거나 추가적인 조치가 필요할 수 있습니다.
  • 부모 요소에 clearfix 등의 추가 클래스가 필요한 경우가 있습니다.
• display: flex:
  • display: flex; 속성을 부모 요소에 적용하여 자식 요소를 가로로 배치합니다.
  • 강력한 레이아웃 기능을 제공하며, 요소의 크기, 순서, 정렬 등을 쉽게 조정할 수 있습니다.
  • 유연한 레이아웃을 구현할 수 있으며, 반응형 디자인에도 유용합니다.
  • 모든 요소들을 가로로 정렬하기 때문에 일부 요소가 원하는 위치에 배치되지 않을 수 있습니다.
  • * 오래된 브라우저에서는 일부 기능이 지원되지 않을 수 있습니다.

  일반적으로 display: flex;를 많이 사용합니다. 브라우저 호환성과 반응형, 유지보수 확장성 등을 고려해서 적절하게 조합하여 사용하면 될 것 같습니다.