Apply borders to inline-block elements uniformly

Question

Apply borders to inline-block elements uniformly

Can anyone suggest a solution to adding borders to inline-block divs in a way that avoids repetition and ensures equal border width on each side of the box? I am trying to create a calendar layout.

#parent{
  width: 400px;
}
#parent > div{
  display: inline-block;
  width:50px;
  height:50px;
  line-height:50px;
  background:cyan;
  border:1px solid;
  text-align:center;
}

<div id="parent">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

html css

Answer 1

Answer №1

A more straightforward approach is to utilize the outline property as an alternative to using border

#parent > div{
    display: inline-block;
    width:50px;
    height:50px;
    line-height:50px;
    background:cyan;
    outline: 1px solid;
    text-align:center;
  }

<div id="parent"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  </div>

Answer 2

A more straightforward approach is to utilize the outline property as an alternative to using border

#parent > div{
    display: inline-block;
    width:50px;
    height:50px;
    line-height:50px;
    background:cyan;
    outline: 1px solid;
    text-align:center;
  }

<div id="parent"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  </div>

Answer 3

Answer №2

To create the desired layout, apply a negative margin to the elements.

#parent {
  width: 400px;
}

#parent>div {
  margin: -1px 0 0 -1px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: cyan;
  border: 1px solid;
  text-align: center;
}

<div id="parent">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

Answer 4

To create the desired layout, apply a negative margin to the elements.

#parent {
  width: 400px;
}

#parent>div {
  margin: -1px 0 0 -1px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: cyan;
  border: 1px solid;
  text-align: center;
}

<div id="parent">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

Answer 5

Answer №3

To achieve the desired effect, consider applying a negative margin either to the top and left or right and bottom edges:

margin: -2px 0 0 -2px;

Answer 6

To achieve the desired effect, consider applying a negative margin either to the top and left or right and bottom edges:

margin: -2px 0 0 -2px;

Answer 7

Answer №4

To ensure proper alignment, it is important that the last line in a display contains an equal or fewer number of elements compared to the previous lines. Additionally, knowing the exact number of elements in one line allows you to avoid using wrapping.

#parent > div{
  display: flex;      
}

#parent > div > div{
  display: flex;
  width:50px;
  height:50px;
  line-height:50px;
  background:cyan;
  justify-content:center;
  align-items: center;

  border-bottom:1px solid;
  border-right:1px solid;
}

#parent > div:first-child > div {
   border-top: 1px solid;
}

#parent > div > div:first-child {
   border-left: 1px solid;
}

<div id="parent">
  <div>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div>
  <div><div>8</div><div>9</div><div>10</div></div>
</div>

Answer 8

To ensure proper alignment, it is important that the last line in a display contains an equal or fewer number of elements compared to the previous lines. Additionally, knowing the exact number of elements in one line allows you to avoid using wrapping.

#parent > div{
  display: flex;      
}

#parent > div > div{
  display: flex;
  width:50px;
  height:50px;
  line-height:50px;
  background:cyan;
  justify-content:center;
  align-items: center;

  border-bottom:1px solid;
  border-right:1px solid;
}

#parent > div:first-child > div {
   border-top: 1px solid;
}

#parent > div > div:first-child {
   border-left: 1px solid;
}

<div id="parent">
  <div>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div>
  <div><div>8</div><div>9</div><div>10</div></div>
</div>

Apply borders to inline-block elements uniformly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can someone help me understand how to change the structure in order to identify which class has a body?

What is the best way to shift a text element within the footer section?

Position a DIV element without specifying the width dimension

Creating Tabbed Navigation with CSS - A Step-by-Step Guide

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

Troubleshooting problem with clicking on SVG within an HTML <div>

What is the method for inserting form control values into a QueryString within HTML code?

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

Hovering over one element in Jquery triggers actions on multiple elements simultaneously

HTML list with clickable elements for querying the database and displaying the results in a <div> element

Javascript addClass and removeClass functions are not functioning as expected

Make your grid easily expandable with full width capabilities using the power of Bootstrap 4

Copying to the clipboard now includes the parent of the targeted element

HTML input field template

Arrange the image in a way that flows smoothly with the text

Customizing material-ui-next: Adjusting image dimensions to perfectly fit within a specified container

Create a div on the right side that expands to occupy all remaining space

Can you tell me the CSS equivalent of the SASS/SCSS expression "&$"?

Elevate when the mouse hovers over the button

I am experiencing issues with React Bootstrap's responsive mode not functioning as desired