Is it possible to apply a margin to <details><summary> elements?

I am struggling with adding a margin to each of the children in my nested <details> elements

.container {
  margin: 20px;
}

.parent,
.child {
  outline: none;
  border: none;
  user-select: none;
  cursor: pointer;
}
<div class="container">

  <details class="parent">
    <summary class="parent">parent summary</summary>

    <details class="child">
      <summary class="child">child summary</summary>child</details>

    <details class="child">
      <summary class="child">child summary</summary>child</details>

    <details class="child">
      <summary class="child">child summary</summary>child</details>

    <details class="child">
      <summary class="child">child summary</summary>child</details>

  </details>

</div>

In my attempts, I added margin-left: 20px to the .child class. While it worked in codepen, in Chrome, the elements appeared in a straight column instead.

Is there a simple solution that I may have overlooked?

htmlcss

Answer №1

The issue originated from a parent element with the class of 

<div class="parent">
that had the CSS property overflow-x: hidden applied to it:

<div class="container_parent">

  <div class="container">

    <details class="parent">
      <summary class="parent">parent summary</summary>

      <details class="child">
        <summary class="child">child summary</summary>child</details>

      <details class="child">
        <summary class="child">child summary</summary>child</details>

      <details class="child">
        <summary class="child">child summary</summary>child</details>

      <details class="child">
        <summary class="child">child summary</summary>child</details>

    </details>

  </div>

</div>

.container_parent {
  overflow-x: hidden;
}

.container {
  margin: 20px;
}

.parent,
.child {
  outline: none;
  border: none;
  user-select: none;
  cursor: pointer;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the max-height to occupy the entire available space

One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows: <body> <nav> <-- top navigation bar <ol> <-- breadc ...

htmlcssbootstrap-4

Eliminate empty space in the table cell

I am working with a table that looks like this: <table> ... <td> <div class="btn-group btn-group-sm"> <button class="btn btn-info mini"><span class="glyphicon glyphicon-duplicate"></span></button&g ...

htmlcsstwitter-bootstrap-3css-tables

When is the appropriate time to utilize the style attribute in CSS?

Hey there, I'm in the process of building a website from scratch and I've hit a snag. I understand that using the style tag isn't ideal, but would it be acceptable in this scenario? Is there a more efficient approach? Let's consider t ...

htmlcssstylescoding-style

Real estate for a targeted audience

1. Overview I have a list of selectors that should always apply certain properties. Some selectors require additional properties to be added. I'm struggling to find a way to achieve this without repeating code. 2. Minimal CSS Example (MCVE) 2.1 ...

cssstylus

Setting up an i18n project in AngularJS

I just embarked on my angularjs journey yesterday with little to no prior knowledge about it. My initial goal is to centralize all the labels for my UI in a file (to facilitate swapping them out for i18n). As far as I know, this can be achieved by importi ...

javascripthtmlangularjs

Format specific words or characters in a text input

In HTML, when I want to display strings in a Text Input or TextArea, I am looking for a way to have specific substrings render with a box around them. I envision these boxed substrings as being treated as a single entity, similar to how highlighting or tex ...

javascripthtml

Using CSS to add a resize handle and implement mouse events in Chrome

While experimenting with the resize property in CSS, I encountered an issue. I have a div that contains a canvas element. .resizable { resize: both; overflow: hidden; border: 1px solid black; } div { height: 300px; wi ...

css

Unlocking the parallax effect with your grandchildren: A guide to creating memorable

I have successfully implemented the parallaxing background effect several times before on Codepen and in small, experimental projects. My go-to tutorial for this technique is this one by Keith Clark. Here is the structure outlined in the tutorial: <d ...

htmlcss

Conceal picture when clicked

My goal is to hide an image upon clicking and then show it again by clicking a specific tag. I've attempted various codes, but none have been successful. Every time I click, the image continues to add to the page. <body> <a href="#" class= ...

jqueryhtml

Problem saving videos when using the right-click function

Hello, I am currently working on retrieving videos from a database, but I have encountered an issue with the video saving option. When a user right-clicks on the video, they are able to save it in their system's storage. What I would like to achieve ...

c#htmlasp.netcss

Instructions for updating the Modal Value using ajax

This is the script I use to retrieve the data <script> $(document).ready(function() { $('.tmpsurat').click(function() { var id=$(this).data('id'); var url ='{{URL('/cekSuratKelengkapan')}}/'+id; ...

javascripthtmljqueryajaxlaravel

BEM Methodology: Ensuring the CSS value in one block takes precedence over property definitions in another block

I'm facing a challenge with BEM as I try to make properties from one block take precedence over styles in another. Some might suggest adding a modifier for .button, but in some cases, specific properties need to be applied only on certain pages withou ...

csssassoverridingbem

What is preventing select2's multiselect feature from functioning properly when using a CDN?

I have implemented the following code snippet: <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel=& ...

htmljquery-select2

What is the best way to transfer information using PHP?

I'm struggling to pass the player id to the delete and update page, but it's not working. Below is my table body: <tr> <td><img src="<?php echo $readRow['Photo']; ?>" width='64px'></t ...

phphtml

Decoding JSON in AngularJS

Looking for assistance in parsing a JSON 2D array with Angular JS and fetching images from the array. Can anyone provide some guidance on this? I have updated my Plunker at this link HTML Code <!DOCTYPE html> <html lang="en" ng-app="myAp ...

javascripthtmlangularjs

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

javascriptjqueryhtmlcsspjax

How can a single item be selected from a multi-select drop-down menu using Python Selenium?

In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...

pythonhtmlformsseleniumxpath

Utilize Flask and Python to make data predictions on a CSV file

Hello there, Just starting out with Python and Flask API, I'm currently working on importing a CSV file and exporting another CSV file with predictions. The INPUT CSV file is structured like this experience test_score interview five ...

pythonhtmlcsvmachine-learningflask

Display the element when it becomes visible in the user's viewport as they

I've been struggling to implement a feature where an element is shown on scroll when it's in the viewport and hidden when it's not. However, despite my efforts, I haven't been able to get it working properly. Here's what I have so ...

javascriptjqueryhtmlscrollviewport

The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with: Despite trying various methods ...

javascriptcss