I'm seeking assistance in understanding the concept of padding in HTML and CSS - can you

Currently learning html/css and facing an issue with adding a border-bottom to my .menu ul li ul li element.

.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
border-bottom: 1px solid #911;
}

The border is being cut off on the right side due to the right padding set in this style:

.menu ul li ul{
position:absolute;
right: 0px;
border:1px solid #911;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
   -moz-box-shadow:0 1px 5px #CCCCCC;
        box-shadow:0 1px 5px #CCCCCC;
margin-top:0px;
display:none;
padding:0px 16px 0px 0px;
}

I am puzzled as to why the 16px right padding is necessary. Removing it causes issues with the drop-down menu display (border misalignment, expansion to the right, and a scroll bar appearing).

Additionally, there seems to be missing space on the border in the bottom left corner of the drop-down menu. Any thoughts on why this is happening?

http://jsfiddle.net/vJaaR/

Thank you in advance for any helpful insights!

htmlcssmenu

Answer №1

When utilizing a width of 100% along with adding border, padding, or margin, your content may exceed the intended 100% width.

For instance, if the width of your page is 900 pixels.

100% of 900px equals 900. If you introduce a 16 pixel padding on both sides, that's an additional 32 pixels. Incorporating a 1 pixel border contributes 2 more pixels. Including a 10 pixel margin on each side adds another 20 pixels.

By summing these values, the total width of your element becomes:

900 + 32 + 2 + 20 = 954

update
If your element is block-level (display: block), specifying the width as 100% is unnecessary. By defining specific padding, margin, and border, the width will automatically adjust to utilize the remaining space (width: auto).

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

A guide on aligning a CSS item perfectly in the center using absolute positioning

I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...

htmlcsscss-position

Tips for revealing a hidden HTML tag

I am currently trying to validate the content within #textd to ensure it is not empty and contains more than 150 characters. If it meets these conditions, I need to transfer the content to another webpage; otherwise, display an error message based on the c ...

javascriptjqueryhtml

HTML Canvas resizing challenge

My goal is to resize the canvas to fit inside its parent div within a Bootstrap grid, but I'm running into an issue where the canvas keeps expanding to 2000px x 2000px. Despite successfully resizing based on console.log outputs showing the same dimens ...

javascripthtmlcssbootstrap-4html5-canvas

Updating Select Options with Multiple Values using Javascript

My goal is to update the selected value of multiple select elements simultaneously using JavaScript. However, I am facing an issue where my script only updates one select element instead of all of them on the page. Unfortunately, I cannot modify the id att ...

javascriptjqueryhtml

JavaScript is utilized to update HTML content through an Ajax request, but unfortunately, the styling is

Apologies for the unconventional title, I am currently in the process of creating a website. When the page is initially loaded, I call upon two scripts within the 'head' tag to create an attractive dynamic button effect. <script src="https:// ...

javascriptjqueryhtmlcssajax

How to responsively position and scale a background image for a full-width div

Here is the situation: I have an SVG with dimensions of 1920*1920 pixels () This is what I require: I intend to use it as a background-image for a div that spans the full width of the screen. The background image for the div must be responsive. An essent ...

cssreactjssvgbackground-image

Steps for positioning an image to overlap the background image

Do I need JavaScript or is HTML and CSS sufficient? If so, should I utilize position or other properties for that? If my description is unclear, a visual demonstration in the form of an image might help. ...

htmlcss

Sliding panels with Jquery

I've created some basic panels that slide in and out horizontally. My goal is to hide all content except the first panel when the page loads. When a link to other panels is clicked, the current content will slide left to be hidden and new content will ...

jqueryhtmlcssslidingpanels

What are the methods for choosing various boxes using the UP/DOWN/RIGHT/LEFT arrow keys?

This code snippet displays a 3x3 matrix where boxes can be hovered over and selected. The goal is to navigate around with keys and select boxes using ENTER. Can anyone provide guidance on how to achieve this functionality? <link rel="stylesheet" href ...

javascripthtmlbootstrap-5

Update a div in PHP using the data received from an AJAX response

I recently developed a PHP application and encountered an issue with updating the value of a date picker. The user is prompted for confirmation when changing the date, and upon confirmation, the date in the "expiry" field (with id expiry) should update alo ...

javascriptphpjqueryhtmlajax

Rearrange the position of the default app name on the navigation bar

I have developed a MVC5 application and by default, the nav-bar displays the "application name", "home", "contact", etc. The application name is positioned on the left side of the screen, but I would like to move it to the center. How can I achieve that? ...

asp.netcssasp.net-mvcasp.net-mvc-3twitter-bootstrap

Incorporating ajax and jquery into html: Step-by-step guide

Previously, I inquired about implementing a show/hide functionality for a div that only renders when a specific link is clicked. (View the original question) Following some advice, I was provided with jQuery and AJAX code to achieve this: function unhide() ...

jqueryhtmlajax

Is there a way to use AJAX for transferring a value?

I am looking to transmit a value to a php-script (servo.php) that will then write the received data in a file (/dev/servoblaster). The script section of my HTML file (index.html): <script> function tiltt() { var tilt = document.getElementById("tilt ...

javascriptphpjqueryhtmlajax

What makes the <aside> tag in HTML a sectioning content, while the <main> tag is not?

I've been delving into the HTML specifications provided by whatwg and MDN. They outline the 4 sectioning elements: article, aside, nav, and section, and mention that they establish the scope of footers and headers. Now, I have a couple of queries: ...

html

Is there a way to programmatically simulate clicking on the "Cancel search" button?

I have a text input field with type "search". In order to perform UI testing, I need to simulate clicking on the "cancel search" button: https://i.sstatic.net/ahcwQ.png The code for this specific input field is as follows: <input type="search" value= ...

javascripthtmlselenium

A limited-width div located on the right side

When I tried to align the div on the right with a max-width of 1200px on a page with an available width of 1600px, it did not work as expected. .csystem { display: flex; max-width: 1200px; flex-direction: column; justify-content: flex-end } < ...

htmlcssflexboxright-align

How can I prevent the expansion of elements in a drop-down menu when using display:

I've been struggling to implement a drop-down feature in my menu. The issue is that when I use display: flex, hovering over the drop-down also expands all other boxes without drop-downs. Any ideas on how to fix this easily? Additionally, is there a w ...

htmlcssflexboxfrontend

JS-powered menu links losing color after being clicked

I have a JavaScript rollover switch issue - when I click on the link, the color should stay orange (#f7931d), but it reverts back to grey. What am I missing in my code? CSS: #content-slider { padding-top:5px; height: 240px; width: 359px; ...

css

What is the step-by-step process for executing the following functions: 1. magnify -> 2. spin 360 degrees -> 3. restore to original size before magnification -> 4. switch colors on and

Can you show me a demo featuring the following functions in order: 1. enlarge -> 2. rotate 360 degrees -> 3. resize to original size -> 4. change color (toggle) $(document).ready(function() { $('.tlist td div').click(function() { ...

javascriptjquerycssjquery-uijquery-animate

Applying a unique style to an element using its ID is effective, but using a class does

Incorporating twitter bootstrap tables has been a focus of mine lately, particularly when it comes to custom styling such as setting background colors for table elements. Here's what I've discovered: by assigning id="foo" to each <td> elem ...

htmlcsstwitter-bootstrap