«загадочные отступы» между инлайн-элементами

W3.CSS Display Classes

W3.CSS provides the following display classes:

Class	Defines
w3-display-container	Container for w3-display-classes
w3-display-topleft	Displays content at the top left corner of the w3-display-container
w3-display-topright	Displays content at the top right corner of the w3-display-container
w3-display-bottomleft	Displays content at the bottom left corner of the w3-display-container
w3-display-bottomright	Displays content at the bottom right corner of the w3-display-container
w3-display-left	Displays content to the left (middle left) of the w3-display-container
w3-display-right	Displays content to the right (middle right) of the w3-display-container
w3-display-middle	Displays content in the middle (center) of the w3-display-container
w3-display-topmiddle	Displays content at the top middle of the w3-display-container
w3-display-bottommiddle	Displays content at the bottom middle of the w3-display-container
w3-display-position	Displays content at a specified position in the w3-display-container
w3-display-hover	Displays content on hover inside the w3-display-container
w3-left	Floats an element to the left (float: left)
w3-right	Floats an element to the right (float: right)
w3-show	Shows an element (display: block)
w3-hide	Hides an element (display: none)
w3-mobile	Adds mobile-first responsiveness to any element.Displays elements as block elements on mobile devices

More Examples

Overflow

Difference between the display property and the visibility property:

function demoDisplay() { document.getElementById(«myP1»).style.display = «none»;
}function demoVisibility() { document.getElementById(«myP2»).style.visibility = «hidden»;
}

Toggle between hiding and showing an element:

function myFunction() { var x = document.getElementById(‘myDIV’); if (x.style.display === ‘none’) {
x.style.display = ‘block’; } else { x.style.display = ‘none’;
}}

Difference between «inline», «block» and «none»:

function myFunction(x) { var whichSelected = x.selectedIndex; var sel = x.options.text;
var elem = document.getElementById(«mySpan»);
elem.style.display = sel;}

CSS Properties

Свойство border в css

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Property Values

Value	Description	Play it
inline	Displays an element as an inline element (like <span>). Any height and width properties will have no effect	Play it »
block	Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width	Play it »
contents	Makes the container disappear, making the child elements children of the element the next level up in the DOM	Play it »
flex	Displays an element as a block-level flex container	Play it »
grid	Displays an element as a block-level grid container	Play it »
inline-block	Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values	Play it »
inline-flex	Displays an element as an inline-level flex container	Play it »
inline-grid	Displays an element as an inline-level grid container	Play it »
inline-table	The element is displayed as an inline-level table	Play it »
list-item	Let the element behave like a <li> element	Play it »
run-in	Displays an element as either block or inline, depending on context	Play it »
table	Let the element behave like a <table> element	Play it »
table-caption	Let the element behave like a <caption> element	Play it »
table-column-group	Let the element behave like a <colgroup> element	Play it »
table-header-group	Let the element behave like a <thead> element	Play it »
table-footer-group	Let the element behave like a <tfoot> element	Play it »
table-row-group	Let the element behave like a <tbody> element	Play it »
table-cell	Let the element behave like a <td> element	Play it »
table-column	Let the element behave like a <col> element	Play it »
table-row	Let the element behave like a <tr> element	Play it »
none	The element is completely removed	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Font

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Examples

Example

<div class=»w3-display-container w3-green» style=»height:300px;»>
<div class=»w3-display-topleft»>Top Left</div>
<div class=»w3-display-topright»>Top Right</div>
<div class=»w3-display-bottomleft»>Bottom Left</div>
<div class=»w3-display-bottomright»>Bottom Right</div> <div class=»w3-display-left»>Left</div> <div class=»w3-display-right»>Right</div> <div class=»w3-display-middle»>Middle</div>
<div class=»w3-display-topmiddle»>Top Mid</div>
<div class=»w3-display-bottommiddle»>Bottom Mid</div>
</div>

Same example as above with added padding:

Top Left
Top Right

Left
Right
Middle
Top Middle

Example

<div class=»w3-display-container w3-green» style=»height:300px;»>
<div class=»w3-padding w3-display-topleft»>Top Left</div>
<div class=»w3-padding w3-display-topright»>Top Right</div>
<div class=»w3-padding w3-display-bottomleft»>Bottom Left</div>
<div class=»w3-padding w3-display-bottomright»>Bottom Right</div> <div class=»w3-padding w3-display-left»>Left</div> <div class=»w3-padding w3-display-right»>Right</div>
<div class=»w3-padding w3-display-middle»>Middle</div>
<div class=»w3-padding w3-display-topmiddle»>Top Mid</div>
<div class=»w3-padding w3-display-bottommiddle»>Bottom Mid</div>
</div>

Displaying text inside an image:

Top Left
Top Right

Top Mid
Left
Right
Middle

Example

<div class=»w3-display-container»>
<img src=»img_lights.jpg» alt=»Lights» style=»width:100%»>
<div class=»w3-padding w3-display-topleft»>Top Left</div>
<div class=»w3-padding w3-display-topright»>Top Right</div>
<div class=»w3-padding w3-display-bottomleft»>Bottom Left</div>
<div class=»w3-padding w3-display-bottomright»>Bottom Right</div>
<div class=»w3-padding w3-display-topmiddle»>Top Mid</div> <div class=»w3-padding w3-display-left»>Left</div> <div class=»w3-padding w3-display-right»>Right</div>
<div class=»w3-padding w3-display-middle»>Middle</div>
<div class=»w3-padding w3-display-bottommiddle»>Bottom Mid</div>
</div>

Property Values

Value	Description
block	Element is rendered as a block-level element
compact	Element is rendered as a block-level or inline element. Depends on context
flex	Element is rendered as a block-level flex box. New in CSS3
inline	Element is rendered as an inline element. This is default
inline-block	Element is rendered as a block box inside an inline box
inline-flex	Element is rendered as a inline-level flex box. New in CSS3
inline-table	Element is rendered as an inline table (like <table>), with no line break before or after the table
list-item	Element is rendered as a list
marker	This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to «inline»)
none	Element will not be displayed
run-in	Element is rendered as block-level or inline element. Depends on context
table	Element is rendered as a block table (like <table>), with a line break before and after the table
table-caption	Element is rendered as a table caption (like <caption>)
table-cell	Element is rendered as a table cell (like <td> and <th>)
table-column	Element is rendered as a column of cells (like <col>)
table-column-group	Element is rendered as a group of one or more columns (like <colgroup>)
table-footer-group	Element is rendered as a table footer row (like <tfoot>)
table-header-group	Element is rendered as a table header row (like <thead>)
table-row	Element is rendered as a table row (like <tr>)
table-row-group	Element is rendered as a group of one or more rows (like <tbody>)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Display Hover

The w3-display-hover class displays content on hover inside a w3-display-container (goes from hidden to shown).

Top Left
Top Right

Left
Right
Mouse over this box!
Top Mid

Example

<div class=»w3-display-container w3-light-grey» style=»height:300px;»>
<div class=»w3-display-topleft w3-display-hover»>Top Left</div> <div
class=»w3-display-topright w3-display-hover»>Top Right</div> <div
class=»w3-display-bottomleft w3-display-hover»>Bottom Left</div>
<div class=»w3-display-bottomright w3-display-hover»>Bottom Right</div>
<div class=»w3-display-left w3-display-hover»>Left</div> <div
class=»w3-display-right w3-display-hover»>Right</div> <div
class=»w3-display-middle»>Mouse over this box!</div> <div
class=»w3-display-topmiddle w3-display-hover»>Top Mid</div> <div
class=»w3-display-bottommiddle w3-display-hover»>Bottom Mid</div></div>

The w3-display-hover classes can be combined with effect and
animation classes to create cool hover effects:

John Doe

Shop Now

Example

You will learn more about animations and effects later in this tutorial.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

More Examples

Example

A demonstration of how to use the contents property value. In the following
example the .a container will disappear, and making the child elements (.b)
children of the element the next level up in the DOM:

.a {  display: contents; border:
2px solid red; background-color: #ccc;  padding: 10px;  width: 200px;}.b {  border: 2px solid blue;
background-color: lightblue;  padding: 10px;}

Example

A demonstration of how to use the inherit property value:

body { display: inline;}p { display: inherit;}

Example

Set the direction of some flexible items inside a <div> element in reverse
order:

div { display: flex; flex-direction: row-reverse;}

Definition and Usage

The display property sets or returns the element’s display type.

Elements in HTML are mostly «inline» or «block» elements: An inline element
has floating content on its left and right side. A block element fills the
entire line, and nothing can be displayed on its left or right side.

The display property also allows the author to show or hide an element. It is
similar to the visibility property. However, if you set , it hides
the entire element, while means that the contents of the
element will be invisible, but the element stays in its original position and
size.

Tip: If an element is a block element, its display type can also be
changed with the float property.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline elements for horizontal menus:

li { display: inline;}

Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with is not allowed
to have other block elements inside it.

The following example displays <span> elements as block elements:

span { display: block;}

The following example displays <a> elements as block elements: