当前位置: 动力学知识库 > 问答 > 编程问答 >

css - borders in HTML

问题描述:

I am new to HTML And CSS. In my CSS file, I have the following:

html {

border-top: 4px solid #000000;

border-bottom: 4px solid #000000;

border-left: 4px solid #000000;

border-right: 4px solid #000000;

margin:0;

padding:0;

}

body {

background: #ffffff;

color: #000000;

line-height: 50px;

font-size: 20px;

font-family: serif;

margin: 0 auto;

padding: 15px 0;

}

.bot-img {

position: relative;

bottom: 0px;

}

When I open the page in Chrome, it looks ok - like so:

When I open the page in Firefox, it looks, like so:

How would I make both match?

Edit:

Here's what the HTML looks like:

<html>

<head>

{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />

<title>TheTitle</title>

</head>

<body>

{% load flatpages %}

{% get_flatpages as flatpages %}

{% for flatpage in flatpages %}

<img class="bot-img" src="{% static 'img/bottomband.jpg' %}"/>

</body>

</html>

I'm developing this with Django 1.5(and MySQL) as the backend.

网友答案:

If you want it to be across your entire html view, you should add the following to your CSS

html {
  height: 100%;
  width: 100%;
}

Also I recommend you refactor your border code to the following:

html {
  border: 4px solid #000000;
}

This just prevents you from having to repeat the same line of code four times.

Hope this helps.

分享给朋友:
您可能感兴趣的文章:
随机阅读: