Using display:inline-block will increase the vertical spacing

Question

Using display:inline-block will increase the vertical spacing

I am currently dealing with the following HTML and CSS setup:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  /* display: inline-block; */
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

When I incorporate inline-block in my CSS, the layout displays as shown below:

https://i.sstatic.net/dbGv1.png

However, when I remove display:inline-block, the layout appears like this (assuming display is block by default):

https://i.sstatic.net/tghQy.png

Now, where does this vertical padding originate from?

html css padding

Answer 1

Answer №1

The padding on the <ul> element is contributing to the extra space, along with collapsing margins. Without setting display: inline-block on the parent <div class="row">, the margins collapse. To fix this, add overflow: auto to the <div class="row">.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  /* display: inline-block; */
  overflow:auto;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

To eliminate the extra space, simply set the margin to zero on the <ul> element.

Answer 2

The padding on the <ul> element is contributing to the extra space, along with collapsing margins. Without setting display: inline-block on the parent <div class="row">, the margins collapse. To fix this, add overflow: auto to the <div class="row">.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  /* display: inline-block; */
  overflow:auto;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

To eliminate the extra space, simply set the margin to zero on the <ul> element.

Answer 3

Answer №2

The spacing adjustment is due to the default margin of the ul element. When I removed the margin from the ul, it aligned as per your requirements.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  display: inline-block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

Answer 4

The spacing adjustment is due to the default margin of the ul element. When I removed the margin from the ul, it aligned as per your requirements.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  display: inline-block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

Using display:inline-block will increase the vertical spacing

Answer №1

Answer №2

Similar questions

"Enhance Your Webpage with Textual Links that Display Background

The styled components can create identical CSS classes with varying conditions

Switching up the Label Colors in Chart.JS

Transforming PHP Variable Using Ajax

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

React JS makes it simple to create user-friendly cards that are optimized

Adding a Bold Headline in Select2: A Quick Guide

Using an image as the background for a three.js scene may cause it to appear distorted

How to Override Global CSS in a Freshly Created Angular Component

Designing a Bootstrap layout with twin divs adjacent to each other

Conceal elements with a single click of a button

Difficulty encountered in getting html email signature to appear correctly on Outlook

What is an alternative method to interact with elements in Selenium besides using Driver.get?

Parsing a Table in Python with HTMLParser

Clicking on the checkbox will trigger the corresponding table column to disappear

What is the method for triggering the output of a function's value with specified parameters by clicking in an HTML

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

How can I use HTML code to style the header cell values of a table?

What is the best method to apply a background image in HTML that functions properly in Internet Explorer?

What could be causing the alignment issue with this html photo gallery?