How to add padding space in /div container via CSS?

css text containers html

71,176

Solution 1

Your html and css work ~~so there must be a typo somewhere in your css file that causes it to be not used~~.

Everything is working as it should. Your problem is that the padding of the box is behind the left-floated nav-bar, your box is really 100% wide although part is hidden behind the bottom nav.

You can solve your problem by floating the .content_bottom container left as well.

You will need to make some additional changes for the borders, but you can do that in the top section so that you only have one horizontal border instead of 2 touching borders with the same colour.

See here for a working example.

Solution 2

10px Padding on all sides

padding:10px;

0px padding on top/bottom and 10px padding on right/left

padding:0px 10px;

for a combination of sides, you can do this

padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px

You can also use the below shortcut to make top/bottom have different values while keeping right/left the same

padding: 20px 10px 30px;

Now you know everything their is to know about padding.

Solution 3

padding: 5px;

or padding-top:5px; for just the top

Solution 4

a mixture of border-collapse:separate and padding: 10px; should do the trick for ya. Post some code for a more detailed explanation.

Solution 5

It sounds like you're experiencing collapsing borders. Try border-collapse:separate.

View more solutions

71,176

Author by

hpy

Updated on February 12, 2020

Comments

hpy about 4 years

Beginner page building question:

I've got a simple /div container defined via a CSS style called "content_bottom" like such:

border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;

When I start typing text in it I noticed that the text starts touching the very left edge of the box. I tried to add padding and even borders (via the CSS style) to the container, but there was no effect. However, adding top/bottom borders DID have an effect. Why is this? What should I do so that the text would not start touching the very left (and top) of the box? Thanks.

P.S. This is the full HTML for the page:

<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>

Here is the full 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;
}

drudge about 13 years

Padding definitely should have affected your text. Could you post your actual HTML along with any CSS that's being applied to the DIV?
hpy about 13 years

OK, editing question to include full HTML (short).

hpy about 13 years

padding: 5px; only affected the top and bottom, still can't get left or right padding...
hpy about 13 years

Tried all of those, the top and bottom works, but still no padding on the sides...
Hussein about 13 years

You asked about padding and i gave you all possibilities with padding. If padding is not what you want, you can try margin. Just replace padding with margin. this will set the space from the outside.
hpy about 13 years

Great, the padding works now! I will also make the adjustments to the borders. Thank you so much!