When 1 Px Border Is Added to Div, Div Size Increases, Don't Want to Do That

When 1 px border is added to div, Div size increases, Don't want to do that

The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.

Eg:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

How to prevent adjoining elements from moving when increasing border width?

Pretty easy to do actually. If you don't want to go the absolute position route, you can do it two ways: substitute a box-shadow the increased border if your don't mind the compatibility compromise or use box-sizing:border-box. The only problem with box-sizing:border-box is that it shifts your content inward (the style rule calculates the total width + padding + border-width in the width attribute. If you set a 5px border to a 100px box, the width is normally 110px to include both left and right borders. With the box-sizing attribute it calculates the border width into the width making it 90px wide instead to allow for the 10px of border width).

j08691 already has the box-sizing solution in his answer, so here is the box-shadow method (notice that I only added 1px of box shadow. This is because the border is still present providing half of the desired width):

 .action_box {   width: 300px;   height: 200px;   border: 1px solid black;   float: left;   margin-left: 10px;   margin-top: 10px; } .action_box p {   border: 1px solid black;   margin-top: 0px;   text-align: center; } .action_box:hover {   box-shadow: 0 0 0 1px black;   cursor: pointer; }

<div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div>

How to give border to any element using css without adding border-width to the whole width of element?

outline:1px solid white;

This won't add the extra width and height.

Placing border inside of div and not on its edge

Set box-sizing property to border-box:

div {    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    width: 100px;    height: 100px;    border: 20px solid #f00;    background: #00f;    margin: 10px;}
div + div {    border: 10px solid red;}

<div>Hello!</div><div>Hello!</div>

box-sizing: border-box - Size not maintained if border is changed afterwards

you can achieve what you want by simply add a hidden border.

Add hidden border (white colored) to items, so that height won't increase. like in the snippet.

.panel-list-item:not(.disabled) {
    border: 1px solid #fff;
}

You may want to tweak other styles too fix issues.

.panel-list-item:not(.disabled) {    border: 1px solid #fff;}
.no-wrap {  white-space: nowrap;}.addl-text {  padding-left: 1em;}.start {  display: flex;  flex-direction: row;  align-items: flex-start;}#col-1 {  max-width: 300px;}#pli-1,#pli-2,#pli-3 {  height: unset;    /* Want to cancel effect of...        */  min-height: 24px; /* ...'height: 24px' in extension.css */}

<!DOCTYPE html><html>
<head>  <meta charset="utf-8">  <link rel="stylesheet" href="https://hg.mozilla.org/mozilla-central/raw-file/4f41a072c0ca/browser/components/extensions/extension.css">  <link rel="stylesheet" href="page-small.css"></head>
<body>  <div id="col-1" class="panel-section">    <fieldset class="panel-section-list">      <legend>Checkboxes</legend>      <div id="pli-1" class="panel-list-item">        <div class="start">          <input id="c11" type="checkbox">          <label class="no-wrap" for="c11">Test</label>          <label class="addl-text" for="c11">Voluptate nisi expe tendis eiusmod firmissimum de cillum nam eiusmod firmis simum expetendis, ipsum offendit.</label>        </div>      </div>      <div class="panel-section-separator"></div>      <div id="pli-3" class="panel-list-item">        <input id="c12" type="checkbox">        <label class="no-wrap" for="c12">Test</label>      </div>      <div id="pli-2" class="panel-list-item">        <input id="c13" type="checkbox">        <label class="no-wrap" for="c13">Test</label>      </div>    </fieldset>  </div></body>
</html>

Add border without changing height of block

You can offset this by adjusting the top & bottom margins on the hovered state:

JS fiddle

.row:hover {
    background: yellow;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: -1px 0;
}

Border not change size of text

You can use box-shadow CSS property instead of border-bottom. Honestly, I think it makes quite a nice result for what you want to achieve.

.header-tab:hover{
  color:#ff704d;
  background:gray;
  box-sizing: border-box;
  box-shadow: inset 0 -3px 0 #ff704d;
}

Hint: I see that you're using height to define the menu's overall height. I recommend you to use the .header-tab padding to adjust the height. This way, you won't even need to vertical align anything.

I've edited your JSFiddle so you can see it.

Add a CSS border on hover without moving the element

You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around:

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

Border length smaller than div width?

You can use pseudoelements. E.g.

div {  width   : 200px;  height  : 50px;     position: relative;  z-index : 1;  background: #eee;}
div:before {  content : "";  position: absolute;  left    : 0;  bottom  : 0;  height  : 1px;  width   : 50%;  /* or 100px */  border-bottom:1px solid magenta;}

<div>Item 1</div><div>Item 2</div>

When 1 Px Border Is Added to Div, Div Size Increases, Don't Want to Do That