웹 페이지에서 위쪽 여백을 제거하려면 어떻게합니까?
내가 만든 모든 웹 페이지에서이 문제가 발생했습니다. 페이지 중앙에 콘텐츠를 배치하는 데 사용하는 '주 컨테이너'div 위에 항상 위쪽 여백이 있습니다. CSS 스타일 시트를 사용하고 있으며 본문의 여백과 패딩을 0px로 설정하고 div에서 여백과 패딩을 0으로 설정했습니다.
body{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
color: black;
font-size: 10pt;
font-family: "Trebuchet MS", sans-serif;
background-color: #E2E2E2;
}
div.mainContainer{
height: auto;
width: 68em;
background-color: #FFFFFF;
margin: 0 auto;
padding: 0;
}
나는 여러 번 온라인을 보았지만 내가 할 수있는 것은 이러한 여백 및 패딩 속성을 설정하는 것뿐입니다. 내가해야 할 다른 일이 있습니까? 여백은 IE와 Firefox에 있습니다.
다음은 코드에 대한보다 자세한 내용입니다 (생성 초기 단계에 있으므로 그다지 많지 않습니다 ...).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainContainer">
<p>Here is the information</p>
</div>
</body>
</html>
다음은 CSS입니다.
@charset "utf-8";
/* CSS Document */
body{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
color: black;
font-size: 10pt;
font-family: "Trebuchet MS", sans-serif;
background-color: #E2E2E2;
}
/* ---Section Dividers --------------------------------------------------------------*/
div.mainContainer{
position: relative;
height: auto;
width: 68em;
background-color: #FFFFFF;
margin: 0 auto;
padding: 0;
}
div.header{
padding: 0;
margin: 0;
}
div.leftSidebar{
float: left;
width: 22%;
height: 40em;
margin: 0;
}
div.mainContent{
margin-left: 25%;
}
div.footer{
clear: both;
padding-bottom: 0em;
margin: 0;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html div.leftSidebar { margin-right: 5px; }
* html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */
비슷한 문제가 있었는데 다음 CSS로 해결되었습니다.
body {
margin: 0 !important;
padding: 0 !important;
}
첫 번째 요소가 h1유사합니까? 그 요소 margin-top는에 여백처럼 보이는 원인이 될 수 있습니다 body.
모든 요소의 여백을 재설정하는 가장 좋은 방법은 css 별표 규칙을 사용하는 것입니다.
@charset 아래의 CSS 상단에 이것을 추가하십시오.
* {
margin: 0px;
padding: 0px;
}
이렇게하면 미리 설정된 모든 여백과 모든 요소 body, h1, h2, p 등의 패딩이 제거됩니다. 이제 다른 div의 이미지 또는 텍스트와 함께 페이지의 상단 또는 헤더를 브라우저와 동일하게 만들 수 있습니다.
CSS의 많은 요소에는 기본 패딩과 여백이 설정되어 있습니다. 따라서 새 사이트 구축을 시작할 때 항상 reset.css파일을 준비 하는 것이 좋습니다 . 이것을 추가하여 기본값을 문지르면 웹 페이지를 더 잘 제어 할 수 있습니다.
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
/* Extra options you might want to consider*/
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
나는 이것이 내가 배우는 동안 나를 괴롭히는 모든 동료 개발자에게 도움이되기를 바랍니다.
다음을 사용하여 여백 축소 효과를 방지 할 수 있습니다 .
body { overflow: hidden }
그러면 body여백이 정확하게 유지됩니다.
나는 같은 문제가 있었다. 다음 css 라인으로 해결되었습니다.
h1{margin-top:0px}
내 주 사업부 h1는 처음에 태그를 포함 했습니다.
비슷한 문제가 발생했습니다. 내 컨테이너 div에 대한 백분율 높이와 상단 여백을 원했지만 본문은 컨테이너 div의 여백을 차지합니다. 해결책을 찾은 것 같습니다.
다음은 내 원래 (문제) 코드입니다.
html {
height:100%;
}
body {
height:100%;
margin-top:0%;
padding:0%;
}
#pageContainer {
position:relative;
width:96%; /* 100% - (margin * 2) */
height:96%; /* 100% - (margin * 2) */
margin:2% auto 0% auto;
padding:0%;
}
내 해결책은 본체 높이를 컨테이너 높이와 동일하게 설정하는 것이 었습니다.
html {높이 : 100 %; }
body {
height:96%; /* 100% * (pageContainer*2) */
margin-top:0%;
padding:0%;
}
#pageContainer {
position:relative;
width:96%; /* 100% - (margin * 2) */
height:96%; /* 100% - (margin * 2) */
margin:2% auto 0% auto;
padding:0%;
}
모든 브라우저에서 테스트하지는 않았지만 작동하는 것 같습니다.
다음은 모두가 요청한 코드입니다. 개발 초기 단계이므로 아직 도움이 될 수있는 코드가 많지 않습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainContainer">
<div class="header"> </div>
<div class="mainContent"> </div>
<div class="footer"> </div>
</div>
</body>
</html>
Here is the css:
@charset "utf-8";
/* CSS Document */
body{
margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
padding: 0;
color: black; font-size: 10pt; font-family: "Trebuchet MS", sans-serif;
background-color: #E2E2E2;}
html{padding: 0; margin: 0;}
/* ---Section Dividers -----------------------------------------------*/
div.mainContainer{
height: auto; width: 68em;
background-color: #FFFFFF;
margin: 0 auto; padding: 0;}
div.header{padding: 0; margin-bottom: 1em;}
div.leftSidebar{
float: left;
width: 22%; height: 40em;
margin: 0;}
div.mainContent{margin-left: 25%;}
div.footer{
clear: both;
padding-bottom: 0em; margin: 0;}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html div.leftSidebar { margin-right: 5px; }
* html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */
Try margin -10px:
body { margin-top:-10px; }
The same issue has been driving me crazy for several hours. What I found and you may want to check is html encoding. In my html file I declared utf-8 encoding and used Notepad++ to enter html code in utf-8 format. What I DID forget of was UTF-8 BOM and No BOM difference. It seems when utf-8 declared html file is written as UTF-8 BOM there is some invisible extra character at the begining of the file. The character (non-printable I guess) effects in one row of "text" at the top of the rendered page. And you cannot see the difference in source-view of the browser (Chrome in my case). Both nice and spoiled files seem identical to the very character, still one of them renders nicely and the other one shows this freaking upper margin.
To wrap it up the solution is to convert the file to UTF-8 NO BOM and one can do it in i.e. Notepad++.
For opera just add this in header
<link rel='stylesheet' media='handheld' href='body.css' />
This makes opera use most of your customised css.
style="text-align:center;margin-top:0;" cz-shortcut-listen="true"
paste this at your body tag!
this will remove the top margin
I had this exact same problem. For me, this was the only thing that worked:
div.mainContainer { padding-top: 1px; }
It actually works with any number that's not zero. I really have no idea why this took care of it. I'm not that knowledgeable about CSS and HTML and it seems counterintuitive. Setting the body, html, h1 margins and paddings to 0 had no effect for me. I also had an h1 at the top of my page
body{
margin:0;
padding:0;
}<span>Example</span>I tried almost every online technique, but i still got the top space in my website, when ever i open it with opera mini mobile phone browser, so i decided to try fix it on my own, and i got it right!
i realize when even you display a page in a single layout, it fits the website to the screen, and some css functions are disabled, since margin, padding, float and position functions are disabled automatically when you fit to screen, and the body always add inbuilt padding at the top. so i decieded to look for at least one function that works, guess what? "display". let me show you how!
<html>
<head>
<style>
body {
display: inline;
}
#top {
display: inline-block;
}
</style>
</head>
<body>
<div id="top">
<!-- your code goes here! -->
eg: <div id="header"></div>
<div id="container"></div> and so on..
<!-- your code goes here! -->
</div>
</body>
</html>
If you notice, the body{display:inline;} removes the inbuilt padding in the body, but without #top{display:inline-block;}, the div still wont display well, so you must include the <div id="top"> element before any code on your page! so simple.. hope this helps? you can thank me if it works, http://www.facebook.com/exploxi
you may also check if:
{float: left;}
and
{clear: both;}
are used correctly in your css.
ReferenceURL : https://stackoverflow.com/questions/2489070/how-do-i-remove-the-top-margin-in-a-web-page
'programing tip' 카테고리의 다른 글
| 정적 컨텍스트는 항상 C #에서 단일입니까? (0) | 2021.01.10 |
|---|---|
| $ .each ()가 모든 항목을 반복하지 않는 이유는 무엇입니까? (0) | 2021.01.09 |
| Iphone의 UiButton에 텍스트 여백 / 패딩 제공 (0) | 2021.01.09 |
| 여러 인수 중 하나를 사용하여 메서드가 호출되었음을 확인 (0) | 2021.01.09 |
| C ++ 템플릿은 단지 매크로 일 뿐입니 까? (0) | 2021.01.09 |