음수 여백이있는 요소 숨기기

Question

음수가있는 요소를 숨기는 방법에 대해 읽었습니다 (실제로는 여기에 있지만 실제로는 볼 수 없습니다).

이 답변에는 이유와 이유에 대한 자세한 설명이 포함되어 있습니다 (visibility: hidden; position: absolute;, display: none). 그렇습니다.이 방법은 문서 흐름에서 요소를 제거하는 방법을 제공했습니다 (유효하지 않을 수도 있음).

나는 이것에 대해 꿈꿔 왔으며, 그런 방법이 있습니까? 그렇다면, 나는 약간의 심층적 인 설명을 좋아할 것이다.

미리 감사드립니다.

Answer 1

예를 들어 div와 같은 블록 레벨 요소 나 배경 이미지가있는 링크의 텍스트를 숨기려고하십니까? 두 번째 항목 인 경우 찾고있는 CSS는 텍스트 들여 쓰기입니다.

a.button { 
    /* .button is a for instance class name */ 
    text-indent: -9999px 
} 

이 문서 흐름의 블록 레벨 요소합니다 (태그) 당신이 그것을에 배치 한 모든 배경을 떠날 것이다, 그러나 텍스트를 이동합니다 :이 같은 과거에 사용했습니다 꺼져 있습니다. 이것은 내가 과거에 사용해온 기술이지만 숨어있는 텍스트에주의하십시오. 검색 엔진은 이것을 검은 색 모자 기법으로 봅니다. 숨겨진 텍스트가 키워드 채우기 나 명백한 스팸 용어처럼 보이지 않아야합니다. 그러면 괜찮을 것입니다.

희망이 도움이됩니다.

Answer 2

일반적으로 음수 여백을 사용하면 요소를 숨길 수있는 "접근하기 쉬운"방법으로 간주됩니다. 절대 위치 지정 또는 부동은 문서 플로우에서이를 제거합니다.

이 기사에서는 몇 가지 이미지 교체 기술을 요약합니다.

http://www.mezzoblue.com/tests/revised-image-replacement/

HTH!

Answer 3

당신은 꿈을 꾸고 있거나화물 컬트 코딩의 희생자가되었습니다. 과도한 음수 여백의 명백한 단점은 최대 창 크기에 의존하고 있다는 것입니다. (과도한 음수 text-indent도 그 문제와 다른 문제를 가지고 있습니다.) 더 큰 것은 무엇이든 그 요소는 다시 보입니다. 거기에 그 크기의 음수 여백으로 무엇을 할 지 지정하지 마십시오.

display: none으로 만 요소를 안정적으로 제거 할 수 있습니다 (존재하지 않는 것처럼). 절대 위치 지정은 요소를 제거하는 것과 같지 않은 요소를 정상적인 흐름에서 제거합니다.