Space Between Border and Content/Border Distance from Content

Space between border and content? / Border distance from content?

Add padding. Padding the element will increase the space between its content and its border. However, note that a box-shadow will begin outside the border, not the content, meaning you can't put space between the shadow and the box. Alternatively you could use :before or :after pseudo selectors on the element to create a slightly bigger box that you place the shadow on, like so: http://jsbin.com/aqemew/edit#source

Weird spacing between element and border in chrome

I had that problem too. A few pixels of the gap between content and borders. Also not regular, different spaces in each. I have seen this on Edge and Chrome. They both are WebKit based. I haven't seen it in Firefox. It seems like the problem is in WebKit itself.

My solution to that problem was to not use borders. Instead, I used

filter: dropshadow(0px 0px 0px 2px black);
box-shadow: 0px 0px 0px 2px black;  

These don't have that gap problem but if you are setting your

box-sizing: border-box;

You have an issue of not including border size within your width and height. For that problem, you can put your box shadow inside:

filter: dropshadow( inset 0px 0px 0px 2px black);

But this time, we face two more problems.

1. You can't make your box-sizing include the shadows. So shadow overlaps content.
2. Shadows are under the element you set. So you cannot see them.

To solve this you either can give your element a ::before and give the shadow to that pseudo element

OR

You can put your element in a container div and give the shadow to the container. This way, you can also give padding in the size of borders (shadows) to the container to get make its size include its fake borders and not overlap them. Also, you need to center your element inside that container.

How should I add some space between the text and the border using CSS?

If you want to have some space between the words and the border, than you need to use padding property for that

.navitem {
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;
    padding: 5px;
}

Demo

Also, you can write the same thing as border: 1px solid green; which is nothing but the border shorthand.

---

Also, you told us that you are a fresher. Make sure you reset the default margin and padding which are applied by the browser by using

* {
   margin: 0;
   padding: 0;
}

Or by using CSS Reset Stylesheet so that your menu styles position stays consistent across the browsers.

---

Lastly, you do not need to call classes on each of your element, you can leave it up to CSS selectors to select them... So get rid of all the classes, and just assign a class to the parent element, and use the selectors below..

Am assigning class to ul which is main_navigation so now we will select all the first level li using

.main_navigation > li {
   /* Target direct child to .main_navigation */
}

And to target direct a inside those li we will use

.main_navigation li a {
    /* Target direct child to .main_navigation > li */
}

Refactored Demo

Creating space between an element and its border

I ended up using the multiple css technique (here), and using border-color: transparent to create a transparent spacing between the element and its border.

space between border and text in span

add some padding to the span

p {  border-bottom: 1px solid black;  line-height: 2em;  margin: 0;}
span {  border-bottom: 1px solid red;  padding-bottom:0.5em;}

<p><span>My bottom-border really needs to be lower. This way it's just ugly and I hate how I can't just move my span-border around a bit without using display:block or inline-block. Booohoooo </span></p><p>bla</p><p>bla</p><p>bla</p>

Reduce space between text and border?

The border applies to the entire "bounding box" of the element. Since you have specified a width and height for the element, the border will be around that area.

The solution would be to create an inline element inside the .ben_buchanan element, and this is the element that actually contains the text and the border.

So

<h1 class="ben_buchanan">BEN BUCHANAN<mark class="fullstop">.</mark></h1>

becomes

<h1 class="ben_buchanan">
    <span class="inside_text">BEN BUCHANAN<mark class="fullstop">.</mark></span>
</h1>

And you apply the border to .inside_text.

---

Related Topics