How to Render a Border to a Div Without Occupying Any Extra Space

How to render a border to a div without occupying any extra space?

You have 3 choices:

Inner and outer boxes(as @xpapad stated).
Using outline, e.g., outline:1px #000 solid;. Read more.
Using box-sizing, which is a css3 property. E.g., box-sizing:border-box;. Read more.

Table inside a div with border does not occupy full space

Try to add border-collapse:collapse to your table:

like this :

.table{
  position: absolute;
  width: 100%;
  border-collapse: collapse; 
}

Here is the full code :

/* Styles go here */
.container{  width: 250px;  height: 250px;  position: relative;  border: 1px solid black;}
.table{  position: absolute;  width: 100%;  border-collapse: collapse; }
.table td{  border-bottom: 1px solid;  padding: 0px;  margin: 0px;  width: 100%;}
* {    margin: 0px;    padding: 0px;}

<!DOCTYPE html><html>
  <head>    <link rel="stylesheet" href="style.css">    <script src="script.js"></script>  </head>
  <body>    <div class="container">      <table class="table">        <tr>          <td>First</td>        </tr>                <tr>          <td>Second</td>        </tr>                <tr>          <td>Third</td>        </tr>      </table>    </div>  </body>
</html>

Image inside div has extra space below the image

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

Demonstration of descenders

You can:

adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
change the display so it isn't inline.

div {  border: solid black 1px;  margin-bottom: 10px;}
#align-middle img {  vertical-align: middle;}
#align-base img {  vertical-align: bottom;}
#display img {  display: block;}

<div id="default"><h1>Default</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>
<div id="align-middle"><h1>vertical-align: middle</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>    <div id="align-base"><h1>vertical-align: bottom</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>
<div id="display"><h1>display: block</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>

How to add borders to div without messing up the layout?

The problem is that when you add in the boarder, the size of the outer divs increased by 4, 2px on each size. So, your container needs to grow in size by 8px.

So change your container to:

 #container {
    width: 970px;
    background-color: #FFF;
    margin: 0 auto;
    overflow: hidden;
}

See: http://jsfiddle.net/QnRe4/13/

CSS: How to make a div block not take space in its parent container

You can give it a position absolute, and navigate it with margins.


    #childDiv {
      position: absolute;
      margin-top: -100px;
      margin-left: -100px;
    }

My div element takes more space than required. How can I get rid of that space?

when you are using bootstrap, it is better to use its classes for layout your document. In the code below I posted the html and css that I was used. In the html tags I used bootstrap classes for making img tag "responsive" and aligning texts and images. the link below from bootstrap documentation could be helpful:
https://getbootstrap.com/docs/4.4/content/images/

I think it is necessary to mention that if you are using lots of images in your code, it is better to make the size of them similar. for example all of them have 168px width and 300px height. because if they have different sizes you probably have some problems in your layout.

in the css code I added a "max-width=168px" according to my image size, you can change it to whatever your image width is.

.imageContainer {
  border: 2px solid #258221;
  max-width : 168px;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>center-img</title>

  <!-- links -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
            <div class="row">
               <div class="col-sm text-center">
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/birds.jpg"/>
                        <div class="text-left">
                          <div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm text-center">
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/view.jpg"/>
                        <div class="text-left" id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
                </div>

            </div>
</div>

  <script src="js-files/jquery-3.5.1.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

How to remove padding/margin and make div occupy all the space?

I don't have much experience with twitter bootstrap, but I'm assuming that the answer would be to look at the css properties for your 'row-fluid' class and check the margin and width.

margin: 0 auto; will give remove any margin (space around the outside of the div) and center it in the container

if ^ is already true, width=50%; (if you're going to have both side by side)

Hope that helps!

position:relative leaves an empty space

Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

I played around with the layout a bit, and I suggest that you change these three rules to:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

How to Render a Border to a Div Without Occupying Any Extra Space