Tidying container boxes borders with CSS

Question

Relatively new to Javascript/HTML5 etc. I'm often in awe of how many different ways there are to do the same thing. In trying to develop a dashboard app, I'm trying to visually fine tune the CSS to get rid of the double boarder boxes interior to the main div container. (Later these subcontainers will be reaching out to various different APIs.)

I'm pretty sure there is a property I can put onto shared that will overlap the boxes giving a nice even clean look but I wasn't able to find one. What are some other ways to handle this situation? Is there some automated way to do it? Or does one need to specify the borders individually on each sub-containers?

.container {
    border: 3px solid black;
    display: flex;
    position: relative;
    flex-direction: column;
    margin: 0;
    padding: 0;
    height: 400px;
}

.shared {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
}

.sub-container {
    border: 3px solid black;
    margin: 0;
    padding: 0;
    align-items: stretch;
    height: 100%;
}

<div class="container shared" id="D">
   <div class="sub-container">
      <h2>Section Sub D1</h2>
      <p id="D1-values">D1 Values</p>
   </div>
   <div class="sub-container">
      <h2>Section Sub D2</h2>
      <p id="D2-values">D2 Values</p>
   </div>
   <div class="sub-container">
      <h2>Section Sub D3</h2>
      <p id="D3-values">D3 Values</p>
   </div>
</div>

score 0 · Answer 1 · answered Sep 06 '20 at 17:35

0

We can use a :not and :first-of-type selector to do this neatly.

.sub-container:not(.sub-container:first-of-type) {
    border-top: none;
}

answered Sep 06 '20 at 17:35

Nate Levin

918
9
22

score 0 · Accepted Answer · answered Sep 06 '20 at 17:40

Add a negative margine for the bottom. in this case for the .sub-container class like this:

.sub-container {
border: 3px solid black;
margin-bottom: -3px;
padding: 0;
align-items: stretch;
height: 100%;
}

This happens because of the margins. In evey element inside is the content, as we go outside, the next one is the padding, then comes the border, but after that we got a margine. So the borders will always be separated. Except if you add a negative margine for the bottom, with equal pixels as the border. This way the elements will overlap eachother.

allways remember this

Tidying container boxes borders with CSS

2 Answers2