일반적인 개발 과정에서 여러 사진을 사용할 때는 종종 IMG를 설치하기 위해 목록을 사용해야합니다.
<! Border-Bottom : 1px Solid Red; ul {Border : 1px Solid 스타일; img src = lipeng.png> </li> </ul> </body> </html>그러나 현재 우리는 문제를 발견했습니다. 왜 내 사진 아래에 추가 줄이 있습니까?
무슨 일이 일어나고 있습니까?
IMG 사이의 바깥 쪽과 내부 경계를 분명히하지 않았습니까?
사실, 이것은 실제로 요소를 인라인하는 유령입니다.
블록 레벨 요소가 아닌 보이는 요소는 내부 관련 요소이며 성능의 특성은 라인 레이아웃의 형태입니다. ---- "CSS 권위 가이드"의미는 무엇입니까?
이것은 실제로 그림 텍스트 및 기타 내부 연관성 요소와 같은 부모 기준선과 일치하지만 기준선과 일치합니다.)
우리는이 문제의 이유를 알고 있기 때문에 해결하는 것이 훨씬 간단합니다.
1. 첫 번째 솔루션인라인 요소이기 때문에이 문제는 자연스럽게이 문제를 간단하고 무례하게 해결할 수 있습니다. 즉, 우리의 요소를 개인화 된 성격으로 바꾸려면 인라인에서 블록으로 변경 될 수 있습니까?
<텍스트/CSS {높이 : 0; : 0; 마진;} </style> 2. 두 번째 솔루션이것은 너무 거칠고, 성별이 바뀌 었습니다. 우리는 어떻게 곡선을 저장하기 위해 곡선을 시도해야합니까?
<텍스트/css {높이 : 0; 패딩 : 0;} </style>이것이 원하는 결과를 얻을 수 있음을 알 수 있습니다.
그 이유는 기준선에서 다른 속성을 설정하는 한 기준선의 기본 속성 이이 문제를 피할 수 있기 때문입니다.
3. 세 번째 솔루션그러나 정렬 방법이 수정 되므로이 요소가 떠오를 수도 있습니다. 이제 더 이상 현재 문서에 있지 않으므로 자연스럽게 배치 할 때이 텍스트를 참조하여 정렬되지 않습니다.
우리는 떠 다니는 것을 사용할 수 있습니다.
<텍스트/css> img : 0; 목록 스타일 : 없음 : 0;} </style>
이것은 또한이 문제를 해결할 수 있지만 부동은 좋지만 탐욕스럽지는 않지만 주목하십시오.
플로팅의 영향을 올바르게 해결할 수 있어야하며, 원래 텍스트 서라운드의 영향을 수행 할 계획이라면 플로팅을 사용하는 것이 최선의 선택이어야합니다.
4. 네 번째 해결책위의 모든 체계가 문제를 해결할 수 없다면 내 큰 살인 만 희생됩니다.
부모의 요소를 텍스트 크기를 0으로 설정할 수 있습니다.
<text/css> img : 200px : 0; 목록 -Stedyle : 없음;
텍스트의 기준에 따라 정렬되기 때문에 텍스트를 직접 설정하여 위치를 배치 할 수 없지만이 접근 방식은 서둘러 사용하는 경우에만 권장됩니다.
요약글쎄, 위는이 문제에 대한 네 가지 솔루션입니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.