여백이 테두리 밖에 있고 안쪽에 패딩이 있다는 것을 CSS에서 기억하는 방법
https://stackoverflow.com/questions/32668
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
저는 CSS를 자주 편집하지 않습니다. 거의 항상 CSS 상자 모델 을 사용하여 padding가 border 내부에 있고 margin가 외부에 있는지 또는 그 반대인지 확인합니다.(다시 확인하고 padding가 내부에 있습니다.)
누군가 이것을 기억하는 좋은 방법이 있습니까?이름이 왜 그렇게 둥근 지에 대한 약간의 니모닉, 좋은 설명 ...
해결책
CSS로 작업 할 때 마침내 패딩 처리 된 셀이 벽의 내부 에 패딩을가집니다.
다른 팁
핀-P가 있음
상자를 사용하고 있습니다.상자에 무언가를 넣는 경우 안쪽에 약간의 패딩을 넣어 측면에 부딪히지 않도록합니다.마진은 다른 것입니다.
Box Dimensions 섹션에서 다이어그램을 인쇄합니다.사양을 확인하고 벽에 붙입니다.
저에게 '여백'은 '여백'보다 더 내적인 소리입니다.인쇄 된 페이지에 대해 생각하면 도움이 될까요?여백은 바깥쪽에있는 영역입니다. 일반적으로 가장자리까지 인쇄 할 수 없습니다. 표시 할 수 없습니다.이러한 여백 내에서 콘텐츠와 여백 사이에 추가 장벽을 제공하기 위해 콘텐츠를 패딩 할 수 있습니까?
CSS로 충분히 작업하면 이것을 기억하는 것이 제 2의 천성이 될 것입니다.
패딩은 일반적으로 내부에 사용됩니다.벽이나 배달 상자의 내부 모두 간단합니다.안쪽 여백이 있으면 여백이 바깥 쪽입니다.너무 어렵지 않아야합니다.
저는 시간이 지남에 따라 배웠습니다. 박스 모델은 상당히 단순하지만 사람들이 그것을 어렵게 생각하는 주된 이유는 body가 모델을 눈에 띄게 깨뜨리지 않기 때문입니다.
정말, body에 여백과 배경을 제공하면 흰색 줄로 둘러싸인 것을 볼 수 있습니다.그러나 이것은 사실이 아닙니다. body의 패딩은 margin과 동일합니다.이것은 박스 모델에 대한 몇 가지 잘못된 정보를 설정합니다.
일반적으로 다음과 같이 생각합니다.
- 여백= 상자 주위의 간격;
- 테두리= 상자의 가장자리;
- 패딩= 상자 내부 공간
Tim Saunders는 몇 가지 훌륭한 조언을 해주었습니다. 처음 CSS를 시작했을 때 완전히 주석 처리 된 훌륭한 기본 스타일 시트를 작성해야했습니다.이 스타일 시트는 여러 번 변경되었으며 여전히 훌륭한 리소스입니다.
하지만 박스 모델 문제가 발생했을 때 '모 파이'를 사용하기 시작했습니다."나는 충분히 뚱뚱하지 않아, 모피를 먹어야한다."이상하지만 그것은 나를 위해 일했습니다.물론 저는 CSS를 배우면서 20 파운드를 썼습니다 ...;-)
방화범을 사용하여 확인하세요.
새 사이트를 만들거나 기존 사이트를 편집해야 할 때마다 템플릿으로 사용할 수있는 주석이 달린 기본 스타일 시트를 직접 만듭니다.
지식이 성장함에 따라 추가하고 다양한 브라우저에 적용하여 다양한 작동 방식을 확인할 수 있습니다.
기억하기 어려운 기타 항목이나 직관적이지 않은 항목에 대한 댓글이나 예를 추가 할 수도 있습니다.
테두리를 일시적으로 추가하십시오.숫자를 가지고 놀면서 차이를 알 수 있습니다.
사실, 요소 주변의 임시 테두리는 작업에 도움이되는 방법입니다. 플로트가 떨어지는 이유 등을 알 수 있습니다.
귀하의 질문에 대한 답변이지만 팁에 가깝습니다.여백과 패딩을 다룰 때마다 작업중인 부분 주위에 테두리를 추가하고 거기에서 작업해야하는 공간을 보여줍니다.모든 설정이 완료되면 테두리를 제거합니다.
PAdding은 요소의 페인팅의 PArt입니다. 요소의 배경 을 확장합니다.한 쌍의 요소 + 패딩을 공통 배경을 공유하는 것으로 생각하는 것이 좋습니다.패딩은 그림의 캔버스와 유사합니다. 패딩이 클수록 캔버스와 배경이 커집니다.테두리 (그림의 프레임)는 그 쌍을 둘러싸고 있습니다.그리고 여백 은 갤러리 벽에있는 그림을 분리합니다.오브젝트 배경의 개념에 대해 생각하면 오브젝트 + 패딩 쌍을 결합하는 데 도움이됩니다.내부와 외부에 대한 일반적인 설명은 기억에 남아 있지 않습니다. 잠시 후 모두가 원래의 혼란으로 돌아갑니다.여백은 세로로 접을 수 있고 패딩은 접을 수 없다는 것을 기억하세요.
Google에 계속해서 묻는 대신 관리자 창을 사용하면됩니다.그 스타일 탭에서 아래로 스크롤하면 다음과 같은 것을 볼 수 있습니다.
여백 : 블록을 이동하려는 경우. 패딩 : 블록 내에서 항목을 이동하려는 경우
