Geek Answers Handbook

Increase css border length

How to increase the frame length beyond the length of my text? This is what I still have:

color: #8C4600; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 15px; border-bottom: 1px solid #D1D1D1;

This is HTML: <li class = "vendors">VENDORS</li>

+8
css html5 border
source share
4 answers

CSS borders are placed between the fields and the padding of the HTML element. If you want the borders of an HTML element to expand beyond the width (or height) of that element, you can add a CSS padding to the element to bring the borders out.

For example, if your html <li class=vendors">VENDORS</li> adds padding:0 10px; to your CSS, it will push the borders out 10 pixels to the right and left.

+5
source share

Use indentation and negative margins.

eg:.

 div { padding: 1em; margin: 0 -1em; border-bottom: 1px solid red; }

The above gives padding on all sides, and a negative 1em gives left and right. You may want to play with this.

+5
source share

CSS

 .inner { width: 80%; } .outer { border-bottom: 1px solid #D1D1D1; color: #8C4600; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 15px; }

HTML

 <div class="outer"> <p class="inner">Your text</p> </div>

You probably need to set the outer width tho. Since it cannot automatically scale in every browser. Or just make the outer 120% and the inner fixed width. It should be possible in several approaches.

0
source share

You must specify "" border: ## px color; in css.

This will create a border around the associated html tag.

Code example:

 <!DOCTYPE html> <html> <head> <style> p { width:225px; border-style:solid; border:2px solid red; } </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html>

By default, without width and border, the border will occupy 100% of the space. You can limit its width and style in any way.

Here is a link to the site that will help you the most.

I hope I was helpful

0
source share

More articles:


All Articles