When text-indent is assigned a percentage value, what determines the width that is used in the calculation?

Here's another issue I encountered while working on revising my Textarea Line Count plugin (shameless promotion).

CSS's text-indent property allows for creating white space before the first line of text. It can be specified in various units like px, em, pt as well as a percentage %.

Let's assume you set text-indent: 30% for your text area. The question arises, which width is used to calculate this percentage? Is it the outer width or the inner width? Put simply, does the calculation include any of the following:

  • Border
  • Margin
  • Padding
javascriptjquerycss

Answer №1

30% of the parent's width is allocated to this element, always inheriting the parent's width percentage.

The padding and border contribute to the overall width of the parent element, unlike margins.

#example {width: 200px; padding: 0 5px; border: 1px solid #000;}

In this example, the total width would be 212px due to padding and border.

Margins function as a tool for positioning elements and only affect the spacing between objects.

Answer №2

After some investigation, I have come to the conclusion that the border is not factored into the calculation. It seems that only the inner width of the element is being measured, without taking into account any border, padding, margin, or other external factors.

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

Guide to filling a dropdown menu by aligning with the text it contains?

I've set up two dropdown select boxes below that are exactly the same: HTML <select id="ddl1" name="ddl1"> <option value="1">TEXT 1</option> <option value="2">TEXT 2</option> <option value="3">TEXT 3&l ...

javascriptjqueryhtmldrop-down-menucombobox

Update the page when the React route changes

I am facing an issue with a function in a component that is supposed to load certain variables when the page is fully loaded. Interestingly, it works perfectly fine when manually reloading the page. However, if I use a NavLink to navigate to the page, the ...

javascriptreactjsreact-router

Having trouble with injecting string HTML into the head section in NextJS?

We have incorporated a NextJS page with a headless CMS platform. Within this content management system, I have included an option for the administrator to save custom code snippets to be inserted either in the head section or at the end of the body. In m ...

javascriptreactjstypescriptnext.js

What are some ways to adjust the sequence in which express Middleware is executed?

Two API's, /api1 and /api2 have been created along with four middlewares - validate1, validate 2, validationResult, checkAdmin. The routes are now excessively long and I'm looking for a way to keep them clean. router.post('/api1', vali ...

javascriptnode.jsapiexpressmiddleware

The list in Jquery UI Autocomplete is not updating correctly

Currently, I am using jQuery UI Autocomplete in conjunction with WebSockets to fetch and display a list of options. Each time a keystroke is detected on the input field (.keyup()), a call is made to retrieve the list. However, I have encountered an issue w ...

javascriptajaxjquery-uiautocompletewebsocket

Selecting radio buttons in IE11 using JQuery

The code snippet below is used for handling form submission: $(".submitButton").click(function(event){ if ($(this).hasClass("disabled")){ event.preventDefault(); return false; } if (!$(this).hasClass("disabled")){ $('.invoice-form&a ...

javascriptjqueryhtmlinternet-explorer-11

The Highchart formatter function is being called twice on each occasion

My high chart has a formatter function that seems to be running twice. formatter: function() { console.log("starting formatter execution"); return this.value; } Check out the Fiddle for more details! ...

javascriptjqueryhighchartsformatter

Searching for a specific index using the .indexOf() method in

My current code includes a for loop that determines the presence of a specific character in strings for (var i = 0; i < length; i++) { console.log(name[i].indexOf('z') >= 0); } The issue at hand is that my code halts after just one i ...

javascript

I am interested in utilizing $axios in conjunction with Vuex constants for my project

My Dream Becoming Reality I frequently use this.$axios, so I attempted to store it in a constant, but unfortunately, it did not work as expected. Despite reading the official documentation, I couldn't grasp the reason behind this issue. Could it be d ...

javascriptvue.jsnuxt.jsvuex

What is the best way to retrieve the state value in react once it has been changed?

How can I ensure that the react state 'country' is immediately accessible after setting it in the code below? Currently, I am only able to access the previous state value in the 'country' variable. Is there a method such as a callback o ...

javascriptreactjs

Having trouble getting webpack to transpile typescript to ES5?

Despite following official guides and various tutorials, I am still facing an issue with compiling my code to ES5 using TypeScript and webpack. The problem is that the final bundle.js file always contains arrow functions. Here is a snippet from my webpack ...

javascripttypescriptwebpack

Implementing data updates in Vue.js within a Mongoose database, along with making API

I've encountered an issue where I need to update a count variable representing the votes each video receives after using GET and POST functions to retrieve and save URLs in my database. Additionally, I'm looking to disable the voting button once ...

javascriptnode.jsmongodbvue.jsaxios

Tips for including attributes in form input HTML tags

Is there a way to modify an attribute of an HTML element? I attempted the following code snippet, but the attribute does not seem to be updating as expected. $(document).ready(function() { $('#username_input').attr('value', 'som ...

javascriptjqueryhtml

Troubleshooting custom filtering with jQuery Datatables across different tables is presenting challenges

I am currently utilizing the Datatables 1.10 jQuery plug-in and I am interested in implementing the custom search feature to filter two tables simultaneously on a single page, as shown below: function applyFilterByErrorClass(propertiesTable, errorClassNam ...

javascriptjquerydatatables

Send a function callback to node.js from a .NET Application using SocketIO4Net

I need to execute a method on a server running node.js. To achieve this, I included SocketIO4Net.Client in my C# project, but I am unsure how to pass 'function(callback)' through the Emit method. I have tried various approaches, but every time ...

c#javascriptnode.jssocket.io

What is the most efficient way to incorporate or import CSS from a CDN into a Create React App without needing to eject?

After reviewing this answer, I can't help but wonder if there's a more efficient method for importing a CSS file into a React component, similar to how JS files are imported. Perhaps something akin to SCSS's @import url('cdn-url.css&ap ...

cssreactjsimportsass

JQuery transmits null values

I have been troubleshooting my code for what feels like forever, but I just can't seem to find the error... My current project involves experimenting with JQuery and AJAX. I created a simple form with a textarea for submission. The form works perfect ...

javascriptjqueryajax

`ASP.NET Core and VueJS integration for seamless file uploading`

I am struggling with my ASP.NET core and VueJS app. The issue at hand is uploading a file along with form data, but the problem arises as the form data ends up being null. The current setup involves using a combination of HTML and JS classes that utilize ...

jqueryvue.jsasp.net-corefile-uploadasp.net-ajax

Placing an object inside a bootstrap column

Looking to enhance my gallery-style display by adding titles within the display boxes for each item. See the scenario on jsfiddle: https://jsfiddle.net/xry7ezb9/5/ The issue arises from using bootstrap's col class, which includes padding that affect ...

htmlcssbootstrap-4

Unable to connect the CSS file from the JSP during a Cross Domain request in Internet Explorer 9

I have created a GWTP web application and am making AJAX calls to a JSP page on a different domain (Cross domain) from the GWT client side. Most of the time, the CSS files are linking correctly and working fine. However, occasionally they do not link prop ...

htmlcssjspgwt