What is the inner border in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What is the inner border in css

醉折花枝作酒筹

Jun 02, 2021 pm 02:21 PM

cssinner border

In CSS, the inner border is set using the box-sizing attribute. You only need to add the "box-sizing:border-box;" style to the element. The value of the box-sizing attribute is border-box, which means that the specified width and height determine the element border.

What is the inner border in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Let’s first look at an example of setting the inner border with css.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div.container {
        width: 30em;
        height: 106px;
        border: 1em solid;
      }

      div.box1 {
        width: 50%;
        border: 1em solid red;
        float: left;
      }

      div.box2 {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        /* Firefox */
        width: 50%;
        border: 1em solid red;
        float: left;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="box1">普通边框！！</div>
      <div class="box2">内边框！！</div>
    </div>
  </body>
</html>

What is the inner border in css

box-sizing property

The box-sizing property allows you to define specific elements that match a certain area in a specific way.

For example, if you need to place two bordered boxes side by side, you can do this by setting box-sizing to "border-box". This causes the browser to render a box with the specified width and height, and put the borders and padding into the box.

Syntax

box-sizing: content-box|border-box|inherit;

Property values:

content-box: This is the behavior of width and height specified by CSS2.1. Specifying the element's width and height (min/max properties) applies to the box's width and height. Padding and border layout and drawing of elements except specified width and height

border-box: Specifying width and height (min/max properties) determines the element border. That is, specifying the width and height of an element includes padding and border. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively.

inherit: Specifies the value of the box-sizing attribute, which should be inherited from the parent element.

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div.container {
        width: 30em;
        height: 74px;
        border: 1em solid;
      }
      div.box {
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        width: 50%;
        border: 1em solid red;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">这个 div 占据了左边的一半。</div>
      <div class="box">这个 div 占据了右边的一半。</div>
    </div>
  </body>
</html>

Rendering:

What is the inner border in css

The above is the detailed content of What is the inner border in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

See all articles