Ways to create distance between a border and an object placed within it

I have a Widget that I created using HTML & CSS, and it looks good. However, I am struggling to add some space between the inside elements and the border line. Can someone please assist me with this?

.solid { border-style: solid; }
<div class="solid">
 <div class="input-group">
  <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
  <div class="input-group-btn">
   <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
  </div>
 </div>
</div>

Here is what my current output looks like:

Preview

htmlcssbootstrap-4

Answer №1

To add extra space, apply padding in the following manner

.input-group{ padding: 10px;}

Answer №2

Make sure to include a CSS class on your div that requires padding

.solid { border-style: solid; }

.padded {
  padding: 10px
}
<div class="solid">
  <div class="input-group padded">
    <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
    <div class="input-group-btn">
      <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
    </div>
  </div>
</div>

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

Maintaining a Multi-page template in PhoneGap: Best practices

I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each indivi ...

jquerycsshtmlcordovajquery-mobile

Different Div Sizes Based on Device Type (Bootstrap)

I am currently working on a Bootstrap 3 website and have several small divs displayed on the page. I want to adjust their size for desktop view and make them full width for mobile view. Here is my approach: I attempted to place each small div within a co ...

htmlcsstwitter-bootstrap

The blur filter in Safari causes colors to appear distorted

I am having an issue trying to add a blur filter to an SVG element. It appears that Safari is not rendering the colors correctly. Take a look at this example: <svg height="110" width="110"> <defs> <filter id="f1" x="0" y="0"&g ...

jqueryhtmlsvgsafarisvg-filters

CSS align multiple elements closely together horizontally

Can you solve this CSS puzzle? I have a div, known as #parentDiv, that is absolutely positioned and has a width of 100%. Inside #parentDiv, I want to place 'n' number of child divs evenly spaced out within the parent div. If there's only ...

htmlcss

Excessive text overflowing in a chat interface can be resolved through CSS styling

After conducting a thorough search, it appears that very few individuals are taking this important element into consideration. I currently have a chat interface set up with a div element containing a ul, which then houses li elements that contain p element ...

htmlcss

Steps for transferring a value to a different page after it has been selected from a listview

web page layout <!DOCTYPE html> <html lang="en"> <head> <title>Student Information</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styleshe ...

javascriptjqueryhtmljson

The form submits immediately after jquery is activated

One challenge I'm facing involves multiple forms on a single page being submitted using jQuery. Currently, I have the following code snippet: $("form").submit(function (e) { // Submit form via Ajax }); The problem arises when the form is only s ...

jqueryhtmlajax

JavaScript loaded only on first visit or after the page is refreshed

For my cross-platform app using Cordova and jQuery Mobile 1.4.5, I have a basic html page that needs to load a javascript file. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src ...

javascripthtmlcordovajquery-mobile

When the button is clicked, a textbox will be revealed using AJAX

When the button is clicked, I would like a text box to open using ajax. Below is my HTML code: https://i.sstatic.net/16qx4.png Here is my ajax code: https://i.sstatic.net/MmJF7.png Here is my PHP code: I am new to Ajax and PHP. I am unsure how to create ...

phphtmlajax

Adjusting CSS using JQuery based on scroll position

I am attempting to dynamically change a CSS style depending on the viewer's position on the page. Despite researching numerous similar threads online, I have not been able to get this code to work as intended. Any assistance would be greatly appreciat ...

jqueryhtmlcss

How to interact with dropdown menu using Rselenium

Greetings, I am currently attempting to utilize Rselenium in order to interact with a dropdown menu. Specifically, the item I wish to click on within the dropdown menu is labeled Date Range. Upon inspecting the html code (refer to the image below), I iden ...

htmlrseleniumweb-scrapingrselenium

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

It may sound a bit confusing at first, but essentially I have some dynamically generated HTML that resembles the following: <body> <div class="component" id="465a496s5498"> <div class="a-container"> <div class="random-div"> ...

javascriptjqueryhtmlcssalgorithm

React component not extending to the bottom of the screen

Within my Index.js file, I have created an Index component that includes a navbar and a landing page layout. I aim to have a showcase section taking up 40% of the width, with the remaining 60% dedicated to a react-bootstrap carousel. The Index component sh ...

htmlcssreactjsreact-bootstrapbootstrap-5

Executing an external JavaScript function from within an internal JavaScript code block

Currently, I am dealing with 2 JavaScript blocks. One is contained within my HTML and handles touch functionality, while the other is an external file serving as a content slider. My goal is to utilize touch events to control the slider - allowing users to ...

javascriptjqueryhtml

JavaScript opacity adjustments not achieving desired outcome

My attempt to make this sub menu fade in and out upon button press is not working as expected. It should fully fade in shortly after clicking 'help' and completely fade out when clicking 'back'. Is the problem with the method I'm u ...

javascripthtmlcss

Is there an issue with loading CSS and JavaScript in mobile view on a website built with CodeIgniter?

My experience with codeigniter has been great so far, but I encountered an issue when trying to view my work on different devices. Here is the problem: Web: Broswer View | Browser (Responsive Design View) Mobile: Screenshot 1 | Screenshot 2 _htaccess: ...

javascriptphpcsscodeignitermobile

Issue with Bootstrap causing individual scroll panels for each column to be unresponsive

Hello, I'm currently using Bootstrap to build a website from scratch. This is my first time working with Bootstrap, so I might be making some errors along the way. My current challenge involves creating individual scroll panels for each of the 3 cont ...

htmlcsstwitter-bootstrapscrollscrollbar

Navigating through tabs in a Meteor application: How to maintain the active tab when using the back button

I am working on a multi-page meteor application where each page includes a navigation template. To switch between pages, I am using iron-router. The user's current page is indicated by setting the appropriate navigation link's class to 'ac ...

javascriptcssmeteoriron-router

AngularJS ng-repeat nested loop allows you to iterate through an array

I am currently working with the following JSON data: { "ListNhomThanhTra": [ { "ListKeHoachThanhTra": [ { "ListDoiTuong": [ { "MA_DV_DUOC_TT": "DT01", ...

htmlangularjshtml-table

Angular dynamically changes the placeholder text in an input based on a selection made in a mat select dropdown

Trying to change the placeholder text in a mat-input based on selection in mat-select, but struggling to bind it to the selected option. <mat-form-field appearance="outline" class="search-field" style="width:40vw"> ...

htmlangular