페이지 스타일링에 도움이됩니다

StackOverflow https://stackoverflow.com/questions/1842853

  •  12-09-2019
  •  | 
  •  

문제

페이지 상단에 다음 이미지가 배치되어 있습니다.

<body>
    <form id="form1" runat="server" >
    <div>
        <div>
            <img src="Images/top.png" width="100%" height="115px" alt="top.png" />
        </div>
    </div>
    </form>
</body>

문제는 이미지의 왼쪽, 상단, 오른쪽 및 하단에 나타나는 약간의 패딩이 있다는 것입니다. 나는 거기에 그 패딩을 원하지 않습니다. 다시 말해, 이미지 상단이 페이지의 왼쪽과 상단과 플러시되고 페이지의 너비를 가로 질러 늘어나기를 원합니다. 스타일로 이것을 어떻게 달성 할 수 있습니까?

도움이 되었습니까?

해결책

일부 브라우저의 기본 스타일은 신체 요소에 패딩을 제공하고 일부는 마진을줍니다. 이미지가 모든 브라우저의 뷰포트에 대해 플러시 되려면 둘 다 제거해야합니다.

    body { margin: 0; border: 0 }

다른 팁

CSS 재설정 규칙을 사용하여 브라우저 스타일을 재설정 한 다음 여기에서 빌드해야합니다. 나는 사용한다 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

<img style="display: block; padding: 0; margin: 0;" ... />

그러나 본질적으로 SomeSort의 Decoratin (즉, "내용"이 아니거나 다른 페이지에 연결된 이미지 인 이미지 인 경우 부모 요소의 배경 이미지로 사용하는 것이 좋습니다.

예를 들어

#pseudo-Image {높이 : 100px; 너비 : 200px; 배경 : 투명 URL (Path/to/Image) 왼쪽 상단 스크롤 스크롤;}

물론 이런 식으로 수행하면 실제 크기로 이미지를 표시하는 것으로 제한되며 DIV를 동일한 치수 이상으로 설정해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top