All geek questions in one place

How to set the border of the inner element to the outer?

Here is my code:

        .compare_header_box{
            padding: 35px 30px;
            direction: rtl;
        }
        .compare_header_box_title{
            font-size: 30px;
            width: 100px;
            float: right;
            margin-right: 5px;
            margin-top: 4px;
        }
        .compare_header_box_items{
            width: 100%;
            border-bottom: 1px solid #ccc;
            direction: ltr;
        }
        .compare_header_box_items a{
            display: inline-block;
            font-size: 16px;
            padding: 15px 40px;
            
        }
        .compare_header_box_items a:hover{
            text-decoration: none;
            background-color: #f1f1f1;
            color: black;
        }
        .compare_header_box_items .active{
            border-top: 3px solid orange;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid white;
        }
        <div class="compare_header_box">
            <span class="compare_header_box_title active">List</span>
            <div class="compare_header_box_items">
                <a href="./gp">gp</a>
                <a href="./in">in</a>
                <a href="./tw">tw</a>
                <a class="active" href="./fb">fb</a>
            </div>
        </div>
Run codeHide result

As you see, border-bottom: 1px solid white;does not appear. I want to set it exactly on border-bottom: 1px solid #ccc;. How can i do this?

+6
source share
6 answers

Use pseudo elements ,

.compare_header_box_items .active {
  position: relative;
  border-top: 3px solid orange;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.compare_header_box_items .active:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  bottom: -1px;
  left: 0;
}

Hope this is what you need

.compare_header_box {
  padding: 35px 30px;
  direction: rtl;
}

.compare_header_box_title {
  font-size: 30px;
  width: 100px;
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}

.compare_header_box_items {
  width: 100%;
  border-bottom: 1px solid #ccc;
  direction: ltr;
}

.compare_header_box_items a {
  display: inline-block;
  font-size: 16px;
  padding: 15px 40px;
}

.compare_header_box_items a:hover {
  text-decoration: none;
  background-color: #f1f1f1;
  color: black;
}

.compare_header_box_items .active {
  position: relative;
  border-top: 3px solid orange;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.compare_header_box_items .active:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  bottom: -1px;
  left: 0;
}
<div class="compare_header_box">
  <span class="compare_header_box_title active">List</span>
  <div class="compare_header_box_items">
    <a href="./gp">gp</a>
    <a href="./in">in</a>
    <a href="./tw">tw</a>
    <a class="active" href="./fb">fb</a>
  </div>
</div>
Run codeHide result
+2
source

Add tags margin-bottom: -1pxto ain .compare_header_box_itemsdiv

Thus, the code will look like this:

.compare_header_box_items a {
    display: inline-block;
    font-size: 16px;
    padding: 15px 40px;
    margin: 0 0 -1px; /* add this line */
}

, , div , , . , 1 .

+1

, : margin-bottom: -1px; .

.compare_header_box{
            padding: 35px 30px;
            direction: rtl;
        }
        .compare_header_box_title{
            font-size: 30px;
            width: 100px;
            float: right;
            margin-right: 5px;
            margin-top: 4px;
        }
        .compare_header_box_items{
            width: 100%;
            border-bottom: 1px solid #ccc;
            direction: ltr;
        }
        .compare_header_box_items a{
            display: inline-block;
            font-size: 16px;
            padding: 15px 40px;
            
        }
        .compare_header_box_items a:hover{
            text-decoration: none;
            background-color: #f1f1f1;
            color: black;
        }
        .compare_header_box_items .active{
            border-top: 3px solid orange;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #fff;
            margin-bottom: -1px;
        }
<div class="compare_header_box">
            <span class="compare_header_box_title active">List</span>
            <div class="compare_header_box_items">
                <a href="./gp">gp</a>
                <a href="./in">in</a>
                <a href="./tw">tw</a>
                <a class="active" href="./fb">fb</a>
            </div>
        </div>
Hide result
+1

box-shadow border, :

 box-shadow: 0 1px white;

( , red .)

.compare_header_box {
  padding: 35px 30px;
  direction: rtl;
}

.compare_header_box_title {
  font-size: 30px;
  width: 100px;
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}

.compare_header_box_items {
  width: 100%;
  border-bottom: 1px solid #ccc;
  direction: ltr;
}

.compare_header_box_items a {
  display: inline-block;
  font-size: 16px;
  padding: 15px 40px;
}

.compare_header_box_items a:hover {
  text-decoration: none;
  background-color: #f1f1f1;
  color: black;
}

.compare_header_box_items .active {
  border-top: 3px solid orange;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  box-shadow: 0 1px red; /* white; */
}
<div class="compare_header_box">
  <span class="compare_header_box_title active">List</span>
  <div class="compare_header_box_items">
    <a href="./gp">gp</a>
    <a href="./in">in</a>
    <a href="./tw">tw</a>
    <a class="active" href="./fb">fb</a>
  </div>
</div>
Hide result
+1

Hyy , ...

.compare_header_box_items .active {
    position: relative;
    bottom: -1px;
}

css, .

:)

.

0

A white frame seems to appear. But the background is also white. Change the background and you will see a white background or part of the code that you can just point at it and check the border. There are so many answers above regarding the result. This answer lies only in the fact that the border is visible and an element appears next to it.

Even SOF uses padding to fix it. If you remove, you will see border-bottom #CCC background.

0
source

Source: https://habr.com/ru/post/1016416/

More articles:


All Articles