Вопрос к странице для начинающих:
У меня есть простой контейнер / div, определенный с помощью стиля CSS с именем "content_bottom", например:
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
Когда я начал набирать текст в нем, я заметил, что текст начинает касаться самого левого края поля. Я пытался добавить отступы и даже границы (через стиль CSS) в контейнер, но эффекта не было. Однако добавление верхней / нижней границ DID дает эффект. Почему это? Что мне делать, чтобы текст не начинал касаться самого левого (и верхнего) поля? Спасибо.
P.S. Это полный HTML-код страницы:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>site title goes here</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">this <br>
</div>
<div class="content_top">is site title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">this is the container's content<br>
</div>
</div>
</body>
</html>
Вот полный CSS:
body {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
font-family: Arial,Helvetica,sans-serif;
color: #cccccc;
font-size: 16pt;
}
.wrapper {
margin: auto;
min-width: 900pt;
font-family: Arial,Helvetica,sans-serif;
width: 900pt;
color: #cccccc;
}
.column_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid black;
min-width: 150pt;
color: #333333;
width: 150pt;
max-width: 150pt;
background-color: #f4f4f4;
float: left;
min-height: 45pt;
max-height: 45pt;
height: 45pt;
padding-top: 105pt;
font-size: 40pt;
text-align: right;
font-weight: bold;
}
.content_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid #f4f4f4;
height: 45pt;
min-height: 45pt;
max-height: 45pt;
padding-top: 105pt;
text-align: left;
font-size: 40pt;
font-weight: bold;
}
.column_bottom {
border-width: 5pt 0 0;
border-top: 5pt solid black;
color: #333333;
background-color: #f4f4f4;
width: 145pt;
min-width: 145pt;
max-width: 145pt;
text-align: right;
padding-top: 50pt;
padding-right: 5pt;
float: left;
}
.content_bottom {
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
font-weight: inherit;
color: #333333;
list-style-type: none;
text-decoration: none;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}