The functionality of box-sizing: border-box does not seem to be working properly when used in

I am currently utilizing the Cleanslate tool to reset all CSS attributes on my widget container along with its children. I have also attempted to apply 'box-sizing: border-box' to all elements, but I am encountering unexpected behavior.

Specifically, when using an anchor element with 'display: inline-block' and 100% width, the padding/margin is not properly subtracted from the width. To see this issue in action, you can view my demonstration on CodePen at the following link: http://codepen.io/anon/pen/dXarGy.

If anyone could assist me in understanding what is causing this problem, I would greatly appreciate it. CSS is not my strong suit, so any help is welcome. Thank you in advance!

htmlcss

Answer №1

boder-box actually does not subtract margin.

According to w3schools:

The width and height properties (and min/max properties) include content, padding, and border, but not the margin.

Based on this information, it appears that your example is functioning correctly since you are applying a margin:

margin: 12px 20px !important;

This margin is added to your width: 100%;

You may also find this article on box-sizing helpful.

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

iTextSharp rendering HTML to PDF in a unique way compared to browsers

I'm currently working on converting an HTML invoice to a PDF within my application, but I'm running into issues where the resulting PDF appears different from how the page displays in various browsers like IE, Chrome, and Firefox. Does anyone ha ...

c#htmlpdfitext

A DIV element may not have any visible height, even when it contains content

My <div> contains multiple <img> elements, each wrapped in its own inner <div>. Despite setting the outer div's height to auto, it fails to adjust dynamically based on the content. To display the inner divs inline, I've applied ...

csshtml

What steps should be taken to validate an HTML5 form without actually submitting it?

I am working on a form that includes various HTML attributes such as: <form> <label>Full Name</label> <input type="text" name="firstname" class="span3" required="required"> <label>Email Address</label&g ...

jqueryhtml

Automatically refreshing the canvas whenever the value of an HTML element is modified in Javascript

Below is the javascript code that is relevant <script> $.fn.ready(function() { var source = $('#source').val(); Meme('url1', 'canvas','',''); $('#top-line, #bottom-li ...

javascriptjqueryhtmlcsscanvas

Delete items within the first 10 minutes of shutting it down

Is there a way to temporarily remove a newsletter element for 10 minutes after closing it on a webpage? The idea is that once the panel is closed, it should stay hidden even if the page is refreshed within that timeframe. I was considering using local stor ...

javascripthtmlcss

Font discrepancies in HTML field types "text" and "textarea" are causing inconsistent font display

Why do the text in my "text" and "textarea" fields show different fonts on my pages' HTML? I attempted to specify the font type in both the background CSS file and within the HTML, but it did not resolve the issue. Just to be transparent...I'm ...

htmlcsstexttextarea

Customize the MUI Slider Component with unique colored thumbs

Check out MUI's slider component at this link. I'm using it to let users select a value range with two thumbs. You can find the documentation for MUI's multi-thumb slider here. If you want to customize the style of the slider thumb, visit ...

javascriptcssreactjsmaterial-uislider

Why are only some of my images appearing on the screen?

I am trying to showcase four images - two in the first row and two below it. However, I am facing an issue where only the images in the top row are appearing while the ones in the second row seem to be missing. I'm not sure what is causing this probl ...

html

What is the method for applying a prefix to component tags in Vue.js?

Currently, I am tackling a project that was passed down to me and have noticed numerous <p-xxxx> tags scattered throughout the codebase, such as <p-page :has-something="val1" :has-another="val2" />, etc. (For example: CompName --> After a b ...

javascripthtmlvue.jsvuejs2

What is the reason that custom styling for a single react component instance does not function properly?

In my current view, I have integrated a react component as shown below: <Jumbotron> Lots of vital information </Jumbotron> I am looking to give this particular instance a unique style, like using a different background image. However, addin ...

htmlcssreactjs

100% width with a pixel offset

In the past, I have achieved this by using padding. The concept is to have two div elements positioned side by side, where one has a width of 100% and the other has a fixed width of 50px. Here's a rough illustration: ------------------------------- ...

csswidthpercentage

Is it recommended to place JavaScript/CSS at the bottom of an HTML document?

I am currently utilizing jQuery Mobile, and at the moment, my <head> section looks like this: <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <title>help</title> <link ...

javascriptjqueryhtmlcssjquery-mobile

Saving the order of elements dropped in jQuery UI Droppable into an input field

Link to setup: https://jsfiddle.net/7b8bqzsh/1/ You can view a full working example using the link provided above. The objective is to store the order of the links in an input field so that it can be saved to a database. Currently, only the latest ID is ...

jqueryhtmljquery-uiinputdroppable

Tips for overlaying a button on top of an image using CSS

I am currently working on a project where I need to position a button over an image. My reference for this task is the W3schools CSS website, and I have made some modifications to the code provided in the link here: https://www.w3schools.com/css/tryit.asp ...

cssreactjs

various image proportions in HTML

I have an image with a ratio of 16:9 that I want to use on my website. On one of the pages, I display a list of products with images having a ratio of 340x265. When a user clicks on an item in the list, it takes them to the product page where the same im ...

htmlcsswebresponsive-designmedia-queries

Steps for designing a fully responsive box-grid featuring 12 identical images with perfectly centered text

I've been struggling for hours trying to solve this problem and I could really use some advice: My goal is to create a fully responsive grid of equal-sized images (400px x 400px each) with centered text using Bootstrap 3. The grid should span 100% of ...

htmlcssresponsive-design

Is there a way to remove the spacing that browsers automatically add to <input> elements?

Take a look at this example: http://jsfiddle.net/JPQxX/ I tested this in both Chrome and Firefox. In both browsers, there seems to be a small 1-2px margin between the two input elements. I am looking for a solution to make these two elements touch without ...

htmlcss

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

Experiencing difficulties with the alignment of Bootstrap columns

I'm encountering an issue with displaying 3 Bootstrap columns in the ContentArea. Even though I can locate them using Developer tools, they seem to be positioned at the bottom of the ContentArea, making them not visible. I've attempted adjusting ...

csstwitter-bootstrapbootstrap-4

How can you easily ensure your React web app is responsive?

As I delve into building a web app using reactjs, one particular challenge I encounter is ensuring its responsiveness. An issue arises when the browser size changes, causing my components to overlap and lose alignment. Is there an easy solution to preven ...

cssreactjsresponsive-design