HTML宽度被边框弄乱了 [英] HTML width messed up by border

问题描述

HTML / CSS新手来这里。

尝试把我在Codeacademy上学到的东西，我坚持的问题，我的标题设置到宽度：100％结束了页面。我相信这是因为边界，当我将它设置为1px而不是10px它几乎适合页面。

我附上了几个截图和我的代码，我敢肯定有一个很容易的解决方案，虽然我不大惊讶，无论我有一个边框或不，我需要了解为什么这种情况发生。

提前感谢。

  #header {
 height：100px; 
 width：100％; 
 margin：auto; 
 background-color：white; 
 border：10px solid black; 
 font-size：80px; 
 text-align：center; 
 font-family：Helvetica，Ariel，Sans; 
  

}

  .left {
 height：400px; 
 width：100px; 
 background-color：white; 
 border：10px solid black; 
 float：left; 
  

}

  .right {
 height：400px; 
 width：100px; 
 background-color：white; 
 border：10px solid black; 
 float：right; 
   

}

图片： http://postimg.org/image/b0vnu2okf/

解决方案

添加边框会使元素的宽度增加到100％以上。

您可以使用框模型，

但是，在这种情况下，我建议删除 width ：100％。

默认情况下，< div> 将跨页面的整个宽度。 p>

您也可以安全地移除 margin：auto 。

  div＃header {
 height：100px; 
 background-color：white; 
 border：10px solid black; 
 font-size：80px; 
 text-align：center; 
 font-family：Helvetica，Ariel，Sans; 
} 
  

http://jsfiddle.net/93EPg/

HTML/CSS novice here.

Trying to put into practice what I've learned on Codeacademy and I'm stuck with an issue where my header which is set to width:100% ends up going off the page. I believe it is because of the border as when I set it to 1px instead of 10px it very nearly fits onto the page.

I've attached a couple of screenshots and my code, I'm sure there's a really easy solution to this and whilst I'm not massively fussed whether I have a border or not I need to understand why this is happening.

Thanks in advance.

#header {
height: 100px;
width: 100%;
margin: auto;
background-color: white;
border: 10px solid black;
font-size: 80px;
text-align: center;
font-family: Helvetica, Ariel, Sans;

}

.left {
height:400px;
width:100px;
background-color:white;
border:10px solid black;
float:left;

}

.right {
height: 400px;
width: 100px;
background-color: white;
border: 10px solid black;
float: right;

}

Image: http://postimg.org/image/b0vnu2okf/

解决方案

Adding a border increases the element's width past 100%.

You can play with the box model, as others have suggested, using box-sizing.

However, in this case, I suggest removing width:100%.
The <div> will span the entire width of the page by default.

You can also safely remove margin:auto.

div#header {
    height: 100px;
    background-color: white;
    border: 10px solid black;
    font-size: 80px;
    text-align: center;
    font-family: Helvetica, Ariel, Sans;
}

http://jsfiddle.net/93EPg/

这篇关于HTML宽度被边框弄乱了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！