Having trouble with setting padding to 0 for Accordion Answers

I am facing an issue with the padding in my 'panel' element. Even though I have set the padding to 0, there is still some unwanted white space visible (highlighted in red blocks in the image below). Can anyone help me identify where this padding/white space is coming from?

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

Below is the relevant code snippet:

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding-top: 0px;
  padding-bottom: 0px;
  display: none;
  background-color: white;
  overflow: hidden;
}
htmlcss

Answer №1

The reason for the default margin on the p element within the .panel class is because it has been specifically set.

To adjust this margin, you must explicitly set it to 0:

.panel p {
  margin-top: 0;
  margin-bottom: 0;
}

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

selecting a div element with a label using the nth-child property

I recently discovered the CSS3 :nth-child() Selector and decided to create a sample Here is the HTML snippet: <body> <div> <label>dsdf</label></div> <div>seconddiv</div> </body> And here's the CSS par ...

javascriptjqueryhtmlcss

What is the recommended Vue js lifecycle method for initializing the materialize dropdown menu?

https://i.stack.imgur.com/cjGvh.png Upon examining the materialize documentation, it is evident that implementing this on a basic HTML file is straightforward: simply paste the HTML code into the body and add the JavaScript initializer within a script tag ...

javascripthtmlcssvue.jsmaterialize

"Dilemma with Displaying a 3-Digit Number in DaisyUI Using Next.Js Countdown Component

Hey there, I'm encountering an issue with the countdown component on my Next.js website using daisyUI. When the number of days exceeds 99, it's not rendering correctly as shown below: https://i.sstatic.net/cWR2tSEg.png https://i.sstatic.net/V0Iv ...

javascriptcssnext.jsdaisyui

Stylesheets are being requested over the network, however, they are not being applied to the HTML

https://i.sstatic.net/GGYxm.png The screenshot above shows the initial setup in Firefox's developer tools. There is a <link rel="stylesheet"> in the header, but no styles are applied to the <body> element in the lower viewport. The second ...

htmlcss

Spin a picture in Angular 9

One of my tasks involves rotating an image in HTML using a component I'm working on. The code snippet I used is: (document.querySelector('#image') as HTMLElement).style.transform = `rotate(${degree}deg)`; Alternatively, I also tried: docu ...

htmlangularwebrotation

Adding a .PHP File to Two Separate DIVs

I am using wordpress to create a custom theme. I'm interested in placing all the content from my slider.php file inside a div box on my index.php page. How would I go about doing this? SLIDER.PHP <div class="slider"> // All the image tags wit ...

javascriptphpjqueryhtmlcss

How to adjust the size of <img> in a Bootstrap carousel to fit the parent element using CSS

My webpage has a dynamic carousel feature where users can upload images, but I have no control over their dimensions. Despite some guidelines in place, it is uncertain if they will be followed. In my development tests, I have used three sample images: one ...

htmlcsstwitter-bootstrapbootstrap-4

Effortlessly alternate between dual-column and single-column layouts using CSS

Creating a basic two column layout with fixed widths is my current project. <div id='box'> <div id='ontop'>Ontop</div> <div id='column1'>Column1</div> <div id='column2'&g ...

htmlcsslayout

What is the process for clearing CSS position properties?

I am facing an issue with a multiselect dropdown in my kendo grid, which is being used for a kendo modal window. The dropdown box initially appears correctly but when I scroll horizontally due to multiple columns, the selected value still displays at the o ...

htmlcss

Collect all chosen items within a form along with their concealed inputs in preparation for submission

Imagine a scenario where you have a table filled with polaroid pictures and you are tasked with deciding whether to keep or discard each one. Yes signifies keeping it, while No indicates throwing it away. I am looking to create an element for each photo t ...

javascriptphpjqueryhtml

Display a particular div upon clicking a specific link, while concealing the other divs

As a beginner in the world of jQuery and coding, I'm encountering some difficulties that I need help with. My goal is to have the 'Vlogging' link activated and show 'Details 1' when the page loads. Then, upon clicking on either &a ...

javascriptjqueryhtmlcss

Navigating to two separate webpages concurrently in separate frames

I am working on creating a website with frames, where I want to set up a link that opens different pages in two separate frames. Essentially, when you click the link, one page (such as the home page in a .html file) will open in frame 1 on the left side, ...

javascripthtmlhrefframes

Audio not functioning on Android version 2.3.6 due to HTML5 issues

I've created an Android Audio Application that functions flawlessly with html5 Audio. However, I've encountered a problem where the audio won't play on certain phones. I'm utilizing a basic HTML5 feature. I've tried various solut ...

javascriptandroidhtmlaudioandroid-2.3-gingerbread

I'm encountering an issue: Uncaught ReferenceError

I am currently working on a to-do list project in javascript, but I keep encountering an error message that says: Uncaught ReferenceError: itemsjson is not defined. After setting my get.item to null, I proceeded to add .push to the code. Can someone pleas ...

javascripthtml

Animating planeGeometry with 2D texture/sprite in Three.js

As a beginner in html5 and three.js, I have been playing around with Mesh objects. My goal is to display different Textures on the Mesh and be able to change them later on. Here is a snippet of my code: angelTexture = THREE.ImageUtils.loadTexture("images ...

javascripthtmlthree.js

Divide a single HTML file into multiple files using Ionic 2 framework

How can I break down a large HTML file into multiple files in Ionic 2? I have attempted to do this using the following methods: <div ng-include src="file1.html"></div> and <link rel="import" href="./file1.html"> Unfortunately, neithe ...

htmlangularionic-frameworkionic2

There seems to be an issue with Jekyll where it is failing to generate HTML for Markdown pages

I recently delved into the world of Jekyll to transfer my blog over to GitHub Pages. Utilizing a local Jekyll tool (jekyll 3.1.3) with the neo-hpstr-jekyll-theme as a starting template on my Windows system. While the entry point (index.html in root) and p ...

htmlmarkdownjekyll

Only scroll the div if it is not within the visible window

I've been looking at this snippet: The sidebar division is what I'm focusing on right now. I want the div to scroll along as I scroll down the page, but I need it to stop scrolling when its bottom is in view. The same should apply when scrollin ...

javascriptjquerycss

What causes the select field value to be combined with the values of other fields in the form?

When I select a value from the dropdown menu, the selected value is being added to the other fields as well. Here is the code snippet that was causing the issue: import React, { Component } from 'react'; import './C.css'; import {But ...

cssreactjs

Aligning text or icon to center in React

Need assistance with positioning an icon in the center of two boxes. Any guidance would be greatly appreciated. Thank you! ...

javascriptcssreactjstwitter-bootstrapbootstrap-4