All geek questions in one place

How to add space in container / div via CSS?

Question about creating a page for beginners:

I have a simple / div container defined using a CSS style called content_bottom:

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

When I start typing, I notice that the text starts touching the very left edge of the window. I tried to add padding and even borders to the container (via CSS style), but there was no effect. However, adding upper / lower DID borders has an effect. Why is this? What should I do to prevent the text from touching the left (and top) window? Thanks.

PS 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 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; }
+4
source share
5 answers

Your html and css work , so there should be a typo in your css file that forces it to not be used .

Everything works as it should. Your problem is that the box gasket is located behind the navigation panel with the left position, your box is really 100%, although part is hidden behind the bottom navigation.

You can solve your problem by leaving a .content_bottom container as well.

You will need to make some additional changes to the borders, but you can do this at the top so that you have only one horizontal border instead of 2 touches of the borders with the same color.

See here for a working example .

+4
source

padding: 5px;

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

+3
source

10px Gasket on all sides

 padding:10px;

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

 padding:0px 10px;

for a combination of parties, you can do it

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

You can also use the shortcut below so that the top / bottom have different values, keeping the right / left the same

 padding: 20px 10px 30px;

Now you know everything they need to know about the supplement.

+3
source

It looks like you are faced with collapsed borders. Try border-collapse: separate.

+1
source

mixture of border collapse: separate and indent: 10px; gotta do the trick for ya. Put some code for a more detailed explanation.

+1
source

Source: https://habr.com/ru/post/1339425/

More articles:


All Articles