Question 44765 in Html Question posted in
Some basic documentation can be found here.

How to make DIV borders to be on the edge of an inside elements? – Html

How can you make a div border to appear the way background-color does (very close to the text) like here?
When I add borders, the whole div just scales to the h tag margins I think?

I don’t want to touch h tag margin. Or is it the only way?

.text-1 {
  background-color: lightblue;
}

.text-2 {
  background-color: lightgray;
  border: solid 3px black;
}
<div class="container">
  <div class="text-1">
    <h2>Menu</h2>
    <p> today </p>
    <p> now </p>
    <p> tomorrow </p>
  </div>
  <br>
  <br>
  <div class="text-2">
    <h2>Menu</h2>
    <p> today </p>
    <p> now </p>
    <p> tomorrow </p>
  </div>
</div>

simplified issue – https://jsfiddle.net/Lnjaz3rs/17/

Tags:

3

Answers


  1. 0

    You can remove the margins on the first and last elements within the div with:

    .text-1 {
  background-color: lightblue;
}

.text-2 {
  background-color: lightgray;
  border: solid 3px black;
}

div *:first-child, div *:last-child {
    margin: 0;
}
    <div class="container">
  <div class="text-1">
    <h2>Menu</h2>
    <p> today </p>
    <p> now </p>
    <p> tomorrow </p>
  </div>
  <br>
  <br>
  <div class="text-2">
    <h2>Menu</h2>
    <p> today </p>
    <p> now </p>
    <p> tomorrow </p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Try using a box-shadow instead.

    .text-1 {
  background-color: lightblue;
}

.text-2 {
  background-color: lightgray;
  box-shadow: inset 0px 0px 0 3px black;
}
    <div class="container">
  <div class="text-1">
    <h2>Menu</h2>
    <p> today </p>
    <p> now </p>
    <p> tomorrow </p>
  </div>
  <br>
  <br>
  <div class="text-2">
    <h2>Menu</h2>
    <p> today </p>
    <p> now </p>
    <p> tomorrow </p>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    This is the intended way for h2 to be handled as the element container includes that space above and below. Background only covers actual displayed content within a container, hence why it’s covering from and up to actual letters being displayed. Border displays a line on the outer part of the container the elements are in, so the whole div is bordered, and this includes the spaces contained in it as well.

    The easiest way to make the border closer to the content is through a negative padding, something like padding: -1em 0; will take space away from top and bottom,but won’t trim your border away. Adapt it to your needs. In any case you’ll need to mess with either the div or the elements to make it display in the way you want while still keeping the border.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search